Question

我希望图片仅在视口大小小于768px时显示。

当小于768像素时，图像应该跨越窗口的整个宽度并且不应该扭曲（即高度应该与宽度成比例地变化）。

但是，现在，当我调整窗口大小时，我无法改变高度。

我已尝试将显示更改为阻止并指定width:100%，height:auto。

HTML：

<div class="row col-12" id="mobileimg">
    <img src="images/img.png" alt="">
</div>

CSS：

#mobileimg {
    display:none;
}

@media only screen and (max-width: 768px) {

#mobileimg {
    display:flex;
    margin-top:20px;
}
}

谢谢！

Answer 1

您需要在图像上设置尺寸。这使图像响应。试试这个：

#mobileimg {
  display: none;
}

@media screen and (max-width: 768px) {
  #mobileimg {
    display: flex;
    margin-top: 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
}

<div class="row col-12" id="mobileimg">
  <img src="http://lorempixel.com/400/200/" alt="">
</div>

当窗口重新调整大小时，图像高度不会调整

1 个答案:

jsFiddle demo