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

2019年7月20日 225次阅读

我希望只在视口大小小于768px时显示图像.

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

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

我已经尝试将显示更改为阻止并指定宽度：100％,高度：自动.

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

点赞