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

我希望图像仅在视口(viewport)大小小于 768 像素时显示。

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

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

我尝试将显示更改为阻止并指定 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;
}
}

谢谢!

最佳答案

您需要在图像本身上设置尺寸。这使图像具有响应性。试试这个:

#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>

jsFiddle demo

关于html - 窗口重新调整大小时，图像高度不会调整，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35400410/