css 调整图像大小而不使其变形

zwghvu4y 于 2022-12-01 发布在其他

关注(0)|答案(7)|浏览(146)

目前我正在用下面的代码做一个非常简单的方法。

<div style="width: 100%;">
    <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg">
</div>

如果我删除代码的height="250"部分，它将打印图像为正常质量+正常大小，我希望它的高度限制为250，并返回类似于此图像的内容。

但是，它返回的内容与下面显示的内容类似。

7条答案

你应该做的是简单地使用'auto'作为CSS宽度属性，如下所示：

<img style="width:auto; height:250px" src="http://i.imgur.com/lNB7QSt.jpg">

应该能达到你的预期。

这是我能想到的唯一合理的方法（使用background-size: cover）。您可能可以对现有的标记做一些棘手的事情，但我不觉得它会给您留下足够灵活的东西。
第一个

将宽度设置为100%时出现问题。请尝试删除width=“100%"，或根据纵横比手动设置宽度。

我相信这可以通过object-fit简单地实现。

<div style="width: 100%;">
 <img width="100%" height="250" src="http://i.imgur.com/lNB7QSt.jpg" style="object-fit: cover;">
</div>

使用的信息从链接在评论我做了...
第一个

第一个

像这样的怎么样？

img {
  display: block;

  max-height: 200px;
  width: max-content;
}