CSS图像调整大小问题答案

【问题标题】：CSS image resize issueCSS图像调整大小问题
【发布时间】：2022-01-20 15:46:37
【问题描述】：

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

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

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

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

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

【问题讨论】：

使用max-height:100px; 和max-width:100px; 代替height:100px; 和max-width:100%; ?
宽度：100%；高度：自动；

标签： html css image

【解决方案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="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>

【讨论】：

这很有意义......那么我的格式就很好了。后端需要检索相同尺寸的图像才能做我想做的事

【解决方案2】：

只需删除

height: 100px;

即

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

【讨论】：

这给了我第三张图片的结果

【解决方案3】：

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

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

【讨论】：