最大宽度在表

我有与表中的IMG显示一个问题：最大宽度在表

<table> 
<tr> 
<td> 
    <div>  
     <img src="https://www.google.ru/images/srpr/logo4w.png"/> 
     <img src="http://pictar.ru/data/media/24/nature__463_.jpg"/> 
    </div> 
    </td> 
</tr> 
</table>

利用CSS：

div { 
    height: 100%; 
    width: 100%; 
    border:2px solid red; 
} 
div img { 
    max-width: 100%; 
    max-height: 100%; 
}

JS Fiddle example。
在Chrome中，这两个图像按比例缩放到div封装，但在Firefox和IE9图像中不能缩放。

我该如何在任何地方获得Chrome的行为？

答案：唯一的解决办法就是使用javascript。我的跨浏览器解决方案是：http://jsfiddle.net/TAE3w/21/

来源

2013-03-01 SerCe

您只需将宽度也设置为100％即可。

div img { 
    width: 100%; 
    max-width: 100%; 
    max-height: 100%; 
}

http://jsfiddle.net/samliew/TAE3w/9/

在所有三个浏览器最一致的效果是：

div img { 
    display: block; 
    width: 100%; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
}

http://jsfiddle.net/samliew/TAE3w/15/

查看相关问题：

来源

2013-03-01 08:44:52

但是在这种情况下，Google图像的缩放比实际更大 – SerCe 2013-03-01 08:50:40

这很有趣，但我的问题是使所有三个浏览器的行为与Chrome中的第一个示例相同，我的问题特别描述[stackoverflow] （http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell），但解决方案不适合我 – SerCe 2013-03-01 09:07:26

你会那么必须使用一些JavaScript。 – 2013-03-01 10:04:06

为了记录在案，为最大宽度支撑在桌子上近日登陆浏览器。

我不确定修补程序是否应用于Webkit，或仅适用于Chrome的Blink引擎。该问题仍然会影响Safari 6.

来源

2013-08-25 23:04:52 Wolverine

在Firefox中，如果指定百分比，max-width不起作用，但如果给定确切值，则最大宽度不起作用。使用javascript将maxWidth设置为图像宽度。不需要包装。

<img onload="this.style.maxWidth=(this.getAttribute('width')?this.getAttribute('width'):this.naturalWidth).toString() + 'px'; this.style.width='100%'; this.style.height='auto';" src="yourimage.jpg" />

如果您不想更改图片标签，请在所有图片上使用javascript funtction。

function makeImagesResponsive(){ 
    var images = document.getElementsByTagName('img'); 
    for(var i = 0; i < images.length; ++i) { 
     images[i].style.maxWidth=(images[i].getAttribute('width')?images[i].getAttribute('width'):images[i].naturalWidth).toString() + 'px'; 
     images[i].style.width='100%'; 
     images[i].style.height='auto'; 
    } 
} 
window.addEventListener("load", makeImagesResponsive, false);

当然，你可以从你的网站的特定部分只选择图片，或者通过类名或其他属性进行筛选。

来源

2014-01-21 19:14:34 Sorin

最大宽度在表

回答

相关问题