HTML: 如何使用 <img> 放大一张图片并保持宽高比？

Question

HTML: 如何使用 <img> 放大一张图片并保持宽高比？

htmlcssimage

3

目前我使用的是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>

- Éric

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dryden Long · Accepted Answer

不需要使用max-width和max-height，只需使用width:100%;即可。

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

这里有一个演示的fiddle：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%;
}

编辑

好的，在评论中经过一些来回讨论后，我认为我更好地掌握了你想要的内容。我们不必在按钮内使用<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/