调整图像大小而不扭曲它答案

【问题标题】：Resize image without distorting it调整图像大小而不扭曲它
【发布时间】：2016-04-02 21:33:34
【问题描述】：

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

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

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

但相反，它返回的内容类似于下面显示的内容。

【问题讨论】：

你的问题我看了三遍还是没明白你在问什么。
所以如果我理解正确的话，你只希望保持纵横比，而不是裁剪图像？我有点喜欢@j08691 .. 仍然很困惑。
@Spyder_Says_hi 是的，这就是我想要的..
这不是你想要的吗？ stackoverflow.com/questions/12991351/…
也许你可以试试 max-height:250 和 width:auto

标签： css

【解决方案1】：

我相信这可以简单地通过 object-fit 来完成。

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

【讨论】：

【解决方案2】：

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

.frame {
  height: 250px;
  background: transparent no-repeat center;
  background-size: cover;
}

&lt;div class="frame" style="background-image: url('http://i.imgur.com/lNB7QSt.jpg')"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

.image-name {

    display: block;
    max-width: 100%;
    max-height: 250px;

}

.image-name2 {

    display: block;
    width: auto;
    max-width: 100%;
    max-height: 250px;

}

<img class="image-name" width="100%" src="http://i.imgur.com/lNB7QSt.jpg?1">

Above is the image with no quality change + the width that you're looking for.


Below is the image with the height you're looking for but the width of the normal image.

<img class="image-name2" width="100%" src="http://i.imgur.com/lNB7QSt.jpg?1">

【讨论】：

【解决方案4】：

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

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

这应该符合您的预期。

【讨论】：

他们希望将其裁剪到图像的中心。我也是这么想的。
不，我不这么认为......这个问题有一个缩放图像的例子。没有裁剪。 OP 似乎不太懂技术。
他们足够精明，可以完全按照他们想要的方式裁剪图像，而且它也恰好靠近图像的中心。
可能还有<img style="width:auto; height:100%; max-height:250px" src="http://i.imgur.com/lNB7QSt.jpg">，所以如果图片高度低于 250 像素，它不会被展开（= 看起来很糟糕）

【解决方案5】：

使用我发表的评论中链接中的信息...

img {
    display: block;
    max-width:230px;
    max-height:250px;
    width: auto;
    height: auto;
}

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

【讨论】：

【解决方案6】：

问题在于将宽度设置为 100%。尝试去掉width="100%"，或者根据纵横比手动设置宽度。

【讨论】：