调整图像大小而不扭曲它

Posted 2023-03-06

【中文标题】调整图像大小而不扭曲它

【英文标题】：Resize image without distorting it

【发布时间】：2016-04-02 21:33:34

【问题描述】：

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

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

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

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

【问题讨论】：

你的问题我看了三遍还是没明白你在问什么。

所以如果我理解正确的话，你只希望保持纵横比，而不是裁剪图像？我有点喜欢@j08691 .. 仍然很困惑。

@Spyder_Says_hi 是的，这就是我想要的..

这不是你想要的吗？ ***.com/questions/12991351/…

也许你可以试试 max-height:250 和 width:auto

【参考方案1】：

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

<div style="width: 100%;">
 <img   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;

<div class="frame" style="background-image: url('http://i.imgur.com/lNB7QSt.jpg')"></div>

【参考方案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"  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"  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   src="http://i.imgur.com/lNB7QSt.jpg">
</div>

【参考方案6】：

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