调整图像大小而不扭曲图像

Question

目前，我正在使用下面的代码执行此操作的一种非常简单的方法。

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

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

但它会返回一些看起来像下面显示的东西。

Answer 1

这是我能想到的唯一理智的方法（使用.frame { height: 250px; background: transparent no-repeat center; background-size: cover; }）。你可以用现有的标记做一些棘手的事情，但我不觉得它会给你留下足够灵活的东西。

＆＃13;

＆＃13;

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

＆＃13;

| Performance Title | Start Date | End Date | Start Time | End Time |

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

double

那应该做你期望的事。

Answer 3

问题在于将宽度设置为100％。尝试删除width =“100％”，或根据宽高比手动设置宽度。

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

.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">

Answer 6

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

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