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中，因此，该图片不是背景图片。

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

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>

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

1 个答案: