问题描述
我在调整管理面板中设置的图像大小时遇到问题.
.users-list>li img {边界半径:50%;最大宽度:100%;高度:自动;宽度:100px;高度:100px;}
最大化时,图像看起来很棒:
如果我调整浏览器的大小,它们都会一起缩小:
然后我尝试删除 height: 100px
属性,这似乎可以解决问题,但是由于某种原因,一张图像被关闭了:
如果您不希望图像被拉长,您应该固定一个维度并允许另一个维度为 auto
.(这会保留图像的纵横比)
参见下面的示例,其中 width
保持不变而 height
自动调整:
img {显示:块;}.正确的,.不正确{边框:1px纯红色;显示:内联块;}. 不正确的 img {最大宽度:100%;宽度:100px;高度:100px;}.正确的图像{最大宽度:100%;宽度:200px;高度:自动;}
<div>这个一伸:</div><div class="不正确"><img src="http://placehold.it/150x50"/>
<div>这将保持纵横比并看起来正确:</div><div class="正确"><img src="http://placehold.it/150x50"/>