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

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

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

尝试这个小提琴，让我知道这是否有帮助：

​

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>

​