當窗口重新調整大小時，圖像高度不會調整

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> 

jsFiddle演示