我希望仅在视口大小小于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;
}
}
谢谢！
您需要在图像本身上设置尺寸。这使图像具有响应性。试试这个：
#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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句