使用css将图像缩放到宽度和高度以进行缩放

前端之家收集整理的这篇文章主要介绍了使用css将图像缩放到宽度和高度以进行缩放前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
边界框约为1000×600,有些图像为500×100,
而其他一些是400×100(极端的例子).现在我想
缩放到边界框能够达到的最大大小
处理,但保持它们的规模.
img {
  width: 100%;
  height: 100%;
}

不会保持图像规模.

解决方法

您只能将宽度或高度设置为100%.例如.
img {
    width: 100%;
}

要么

img {
    height: 100%;
}

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

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

猜你在找的CSS相关文章