假设我有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 */
  }
}

10-05 20:42
查看更多