如何修正CSS/HTML图像纵横比不同显示器之间的固定？
提问于 2022-11-27 22:22:24
每当我使用以下代码时，方形图像的纵横比(1:1纵横比)在不同设备(不同类型的监视器/移动电话)之间会发生变化？当我说改变的时候，在某些设备上，它是一个完美的方形图像，正如我所期望的，但在某些设备上，它变成了一个矩形。有人知道怎么解决这个问题吗？我想要它有原来的高宽比。
<div class="col-xl-3"> <img src="images/myimg.jpg" style="width: auto; height: 310px; margin-top: -190px; padding-left: 50px;"
class="img-fluid" alt="Placeholder image"> </div><div class="col-xl-3"> <img src="images/myimg.jpg" style="width: 310px; height: 310px; margin-top: -190px; padding-left: 50px;"
class="img-fluid" alt="Placeholder image"> </div>..img流体{最大宽度: 100%，高度: auto }
这是一个在github页面上托管的静态网站。
尝试不同的选择。我原以为它能保持原来的纵横比。
回答 2
Stack Overflow用户
发布于 2022-11-27 22:35:34
您可以尝试将width & height 100%赋予映像并限制父div。这样，它将始终获得可用的宽度和高度，但不超过max-width & max-height，而不管设备是什么。
.img-container {
width: 100%;
height: 100%;
max-width: 310px;
max-height: 310px;
}
.img-container img {
width: 100%;
height: 100%;
}<div class="img-container"> <img src="https://images.unsplash.com/photo-1495615080073-6b89c9839ce0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=906&q=80" class="img-fluid" alt="Placeholder image"> </div>
Stack Overflow用户
发布于 2022-11-27 22:38:07
.myImg {
display: block;
max-width:120px;
max-height:210px;
width: auto;
height: auto;
}<p>This photo is originally 500 pixels, but should get resized by the CSS</p>
<img class="myImg" width="400" height="400" src="https://i.imgur.com/nOBDgBx.png">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74596714
复制相关文章
腾讯云开发者
