假设我有3个具有这些尺寸的图像:
Img1: 400px x 400px
Img2: 600px x 200px
Img3: 200px x 600px
我希望它们显示得尽可能宽和尽可能高,但始终显示最大宽度为300px,最大高度为200px,并且显然保持图像比例。
即,图像应显示为:
Img1: 200px x 200px
Img2: 300px x 100px
Img3: 66.67px x 200px
作为前端开发的新手,我倾向于只使用:
img {
max-width: 300px;
max-height: 200px;
}
而且它可以在现代浏览器(例如Chrome)中正常运行,但是在IE10中则无法使用,例如,图像高度为200px,但应更宽。
那么,有没有办法使这种简单的事情在所有浏览器中都能正常工作?
最佳答案
使用CSS3-Media_queries#aspect-ratio
@media screen and (device-aspect-ratio: 16/9),
screen and (device-aspect-ratio: 16/10)
{
//your css here
}
当宽高比为
16:9 or 16:10.
时选择样式编辑:
(因为该问题中有一个修改)
采用
width: 100%;
height:100%;
应用专门用于
IE8
的条件CSS或使用以下IE hack:@media \0screen {
img {
width: auto; /* for ie 8 */
}
}