CSS图像调整大小问题

Norgul 发表于 Dev

诺古尔

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

.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;
}
.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>

请参见下面的示例，其中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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。