html - 如何在手机上查看图像时放大？

Question

我有一个响应式网站，但一张图片(gif 动画)在手机屏幕上看起来太小了。如何在手机上放大而不在桌面上放大？

我已经尝试使用媒体查询将该元素放大到 120%。没用。

<div class="container-fluid">
  <div id="#Ecosys" class="row ecoBG">
    <div class="col-lg-12 ecoBG"><img src="img/ourecosystem.gif" class="img-responsive center-block" alt="Our Ecosystem"></div>
  </div>
</div>

CSS:

@media(max-width:500px) {
    h2 {
    font-size: 24px;
} 
    h1 {
    font-size: 30px;
}
.faceBookText {
    font-family: "Arial Black"; font-size: 20px
}
    #Ecosys {
background-size: 120%
}
}

我只是继承了这个，不知道如何实现。 gif 需要在手机上尽可能宽。手机显示屏上的 gif 已扩展到其边界，但所有者希望它看起来更大。

我希望:A) 将图像扩大到 120% 或B) 用裁剪后的版本替换图像。

很明显，我已经不知所措(作为新手)，所以非常感谢您提供一些指导。

Answer 1

background-size 是一种只能应用于背景图像的样式。您正在使用 img 标签并将图像包含在 src 中，因此该图像不是背景图像。

试试这个 fiddle ，如果有帮助请告诉我:

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

.faceBookText {
    font-family: "Arial Black";
    font-size: 20px;
}

#Ecosys {
  width: 200px;
}

#Ecosys img {
  width: 100%;
  height: auto;
}

<div class="container-fluid">
  <div id="Ecosys" class="row ecoBG">
    <div class="col-lg-12 ecoBG"><img src="https://media.giphy.com/media/Wq6DnHvHchrTG/giphy.gif" class="img-responsive center-block" alt="Our Ecosystem"></div>
  </div>
</div>