CSS图像调整大小问题

小编典典

CSS图像调整大小问题

html

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

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

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

阅读 303

2020-05-10

共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="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>

2020-05-10