HTML：如何使用 <img> 放大图像并保持纵横比？答案

【问题标题】：HTML: how to upscale an image with <img> and keep the aspect ratio?HTML：如何使用 <img> 放大图像并保持纵横比？
【发布时间】：2014-03-20 15:38:36
【问题描述】：

目前我正在使用img，除了max-width 和max-height 之外没有其他约束，我喜欢这样一个事实，即当我使用更大的图像时，我的浏览器会缩小图像以使其完全适合其区域（按钮， div，随便），同时保持图像纵横比。

但对于图像较小的情况，我希望浏览器在保持纵横比的同时放大图像（使其占用整个宽度或高度）。

我尝试使用width:100% 或/和height:100%，但当然这些会拉伸图像，这不是我想要的。

这是一个例子。
第一张图片很大，可以适当缩小比例。
第二张图片很小，不高档......我不知道如何正确升级它。这是我的问题！
我想要一个纯 CSS 解决方案，如果可能的话，不要使用 javascript。

注意：我不知道图像的确切尺寸是多少，如果它太大我想缩小尺寸，如果它太小我想放大。

<!DOCTYPE html>
<html>
<body>
    <div>
        <button type="button" style="width:256px; height:256px">
            <img src="http://www.google.com/doodle4google/images/d4g_logo_global.jpg" alt="Smiley face" style="max-width:100%; max-height:100%">
        </button>

        <button type="button" style="width:256px; height:256px">
            <img src="http://static.autodesk.net/etc/designs/v2171/autodesk/adsk-design/images/autodesk_header_logo_140x23.png" style="max-width:100%; max-height:100%">
        </button>
    </div>
</body>
</html>

【问题讨论】：

标签： html css image

【解决方案1】：

不需要max-width 和max-height 只需使用width:100%; 代替。

如果您只定义宽度，图像将自动保持其纵横比。

这是一个展示它的小提琴：http://jsfiddle.net/Ea26r/

HTML：

<div>
    <button type="button">
        <img src="..." alt="Smiley face">
    </button>
    <button type="button">
        <img src="..." >
    </button>
</div>

CSS：

img {
    width: 100%;
}

编辑

好的，所以在 cmets 中来回一些之后，我想我对你要找的东西有了更好的把握。与其在按钮内使用<img> 标签，不如使用CSS 将background-image 应用于按钮，然后使用background-size: contain; 来缩放照片，而不管照片的方向如何。像这样的：

HTML

<button id="button1" type="button" style="width:256px; height:32px">
</button>

CSS

#button1 {
    background-image: url('http://www.url-to-image-here.com');
    background-size: contain;
    background-repeat: no-repeat;
}

现在，请记住 IE8 及更低版本不支持background-size:contain;，因此此解决方案并不完美，但如果您不关心对旧浏览器的支持，那么这应该可以满足您的需求。这是一个小提琴：http://jsfiddle.net/68VRk/

【讨论】：

是的，你需要它，否则你会过度缩放。在这里查看这个：jsfiddle.net/FLcHd我将图像更改为垂直图像以显示它如何变得复杂......中间按钮是您的建议。最后一个按钮更好，但由于宽度：100％，我得到了拉伸......好的答案是左右字母装箱。
然后为两个方向的可能性和高图像添加一个类，将其更改为 height:100%; 参见此处：jsfiddle.net/KTduh
我希望我能提前知道图像，但在我的上下文中我不知道。这个jsfiddle是一个简化。就我而言，我事先并不知道图像......
为了记录，图像可以很宽，但如果画布（按钮、div 等）比您需要使用“tall”类更宽。看这个例子：jsfiddle.net/P9NA3/3
@Éric 啊，我明白了。我已经用另一种解决方案更新了我的答案供您尝试。