CSS图像resize的问题

调整pipe理面板中设置的图像时遇到问题。

.users-list>li img { border-radius: 50%; max-width: 100%; height: auto; width: 100px; height: 100px; } 

当最大化时，图像看起来很棒：

但是，如果我调整浏览器大小，它们都会缩小：

然后我试图通过删除height: 100px属性似乎做的伎俩，但一个图像是由于某种原因closures：

Answer 1

如果你不想让图像伸展出来，你应该固定一个维度，并允许其他维度为auto 。 （这保留了图像的宽高比）

看下面的例子， width保持不变而height自动调整：

 img { display: block; } .correct, .incorrect { border: 1px solid red; display: inline-block; } .incorrect img { max-width: 100%; width: 100px; height: 100px; } .correct img { max-width: 100%; width: 200px; height: auto; } 

 <div>This one stretches out:</div> <div class="incorrect"> <img src="http://placehold.it/150x50" /> </div> <div>This will preserve aspect ratio and look right:</div> <div class="correct"> <img src="http://placehold.it/150x50" /> </div> 

Answer 2

只要删除

 height: 100px; 

即

 .users-list>li img { border-radius: 50%; max-width: 100%; height: auto; width: 100px; } 

Answer 3

您也可以在<img>标签中使用height属性。

像这样<img src="/path/to/image" height="40">没有任何CSS