简单的跨浏览器图像大小调整

Question

假设我有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但应该更宽......

那么，有没有办法在所有浏览器中使用这么简单的东西？

Answer 1

使用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 */
  }
}

Answer 2

您可以使用JS来解决此问题，

如果image.height＆gt; image.width：  然后image.height = youdiv.height 其他   然后image.width = youdiv.width

我在这个项目中做了类似的事情。你看看那个。 https://code.google.com/p/php-image-gallery-fullscreen/ 码： https://code.google.com/p/php-image-gallery-fullscreen/source/browse/index.php

看看行号100-115。 希望它能帮到你。 （此代码可能不适用于IE10 [未经测试]，但我认为，你明白了）