CSS图像调整大小问题 [英] CSS image resize issue

问题描述

在调整我在管理面板中设置的图片大小时出现问题。

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

最大化时，图像看起来很不错：

如果我调整浏览器大小，

然后我尝试删除 height：100px 属性，但是一个图片是出于某种原因：

解决方案

如果您不想让图片伸展，请缩小一个尺寸，其他维度为 auto 。 （这保留了图像的宽高比）

请参阅下面的示例，其中 width 保持不变， height 自动调整：

  img {display：block;}。correct，.incorrect {border：1px solid red; display：inline-block;}。img {max-width：100％; width：100px; height：100px;}正确的img {max-width：100％; width：200px; height：auto;}  
 
 < div& out：< / div>< div class =incorrect>  
 

请参阅下面的示例，其中 height 保持不变，而 width 调整：

  img {display：block;}。 border：1px solid red; display：inline-block;}。incorrect img {max-height：100％; height：100px; width：100px;}。img {max-height：100％; height：200px; width：auto;}  

 < div& out：< / div>< div class =incorrect>  




I have a problem when resizing images I have set up in admin panel.

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

When maximized, the images are looking great:

If I however resize browser, they all shrink together:

And then I tried by deleting the height: 100px property which seems to do the trick, but one image is for some reason off:

解决方案

If you do not want your images to stretch out, you should pin down one dimension and allow the other dimension as auto. (this preserves the aspect ratio of the image)

See the example below where width is kept constant while height auto-adjusts:

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>

See the example below where height is kept constant while width auto-adjusts:

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-height: 100%;
  height: 100px;
  width: 100px;
}
.correct img {
  max-height: 100%;
  height: 200px;
  width: 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>

这篇关于CSS图像调整大小问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！