【问题标题】: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】:

您也可以在&lt;img&gt; 标签中使用height 属性。

像这样 &lt;img src="/path/to/image" height="40"&gt; 没有任何 CSS

【讨论】:

    猜你喜欢
    • 2012-10-17
    • 2011-03-18
    • 1970-01-01
    • 2017-12-09
    • 1970-01-01
    • 2016-09-11
    • 2017-01-04
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多