html - CSS图像调整大小问题

Question

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

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

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

如果我调整浏览器的大小，它们都会一起缩小:

然后我尝试删除 height: 100px 属性，这似乎可以解决问题，但有一张图片由于某种原因关闭了:

Answer 1

如果您不希望您的图像拉伸(stretch)，您应该固定一个维度并将另一个维度设置为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="https://via.placeholder.com/150x50" />
</div>

<div>This will preserve aspect ratio and look right:</div>
<div class="correct">
  <img src="https://via.placeholder.com/150x50" />
</div>

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

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>