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

问题描述

我在调整管理面板中设置的图像大小时遇到​​问题.

.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"/>

参见下面的示例，其中 height 保持不变而 width 自动调整:

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"/>

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屋！