使用CSS将图像缩放到宽度和高度以缩放 [英] Scale image with css to both width and height to scale

问题描述

边框大约是1000x600，有些图片是500x100， 而另一些则是400x100(最出色的示例).现在我想 都将其缩放到边界框能够支持的最大大小 处理，但要保持缩放比例.

The bounding box is approx 1000x600, and some images are 500x100, while some others are 400x100 (extreme examples). Now I'd like to scale both up to the maximum size the bounding box is capable to handle, but keep them to scale.

img {
  width: 100%;
  height: 100%;
}

不会使图像缩放.

推荐答案

您只能将宽度或高度设置为100％.例如

You can set only width or only height to 100%. E.g.

img {
    width: 100%;
}

或

img {
    height: 100%;
}

这将保留图像比例，但是图像可能会溢出容器.

That will preserve the image scale, but the image might overflow the container.

这可能不适用于所有浏览器，但适用于最新版本的Firefox，Chrome和Opera.过去我对此有过奇怪的经验，我的解决方案是在服务器上计算新的图像大小.

This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.

这篇关于使用CSS将图像缩放到宽度和高度以缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！