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

Question

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

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

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

我已经尝试将显示更改为 block 并指定 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>

jsFiddle demo