IE和FireFox中的流体图像（最大宽度） [英] Fluid images in IE and FireFox (max-width)

问题描述

我使用的是max-width，而且工作正常。很好的Chrome，Safari和歌剧，但在IE和FireFox它不工作（图像显示与他们的全尺寸，这是远远大于页面本身）。

我知道有些人可能会告诉我只使用width：100％;但是将小图片大小调整为父元素的大小，这是不确定的。

有人有任何解决方案吗？它必须是纯HTML& CSS，没有JS。

  img {
 max-width：100％; 
 height：auto; 
 line-height：0; 
 border：0; 
} 
  

图像基本上是在表中的一个div， div。

不是实际的代码（但是它的简化版本），因为它需要更多的空间：

 < div class =blabla> 
< div class =blablablastyle =max-width：1110px;> 
< table>< tr> 
< td>文本，随机，ladida，文本
< img src =random_source.lol/>< / td> 
< / tr>< / table> 
< / div> 
< / div> 
  

事情是，如果需要，我不想缩小所有图片， / p>

感谢。

Ps：我已经在这里搜索了很多和红色的主题，

解决方案

您的代码在各种浏览器中运行良好。

查看此演示： http：// jsfiddle。 net / abhitalks / mxmzjnaL / 1

问题在于你的表。给你的表和/或 td 一些大小和一个 table-layout：fixed; / code>到您的表。

请参阅： http://jsfiddle.net / abhitalks / mxmzjnaL / 2

相关的CSS ：

  table {
 table-layout：fixed; 
 width：50％; 
} 
 td {
 width：100％; 
} 
 img {
 max-width：100％; 
 height：auto; 
 line-height：0; 
 border：0; 
} 
  

注意：使用百分比单位表以保持流畅。

。

I'm trying to do a fluid design, so the images will resize down, when browser windows is resized.

I used max-width, and that worked well for Chrome, Safari and opera, but in IE and FireFox it does not work (the images are shown with their full size, which is much bigger than width of page itself).

I know some people might tell me to use just width: 100%; but that resizes small images to size of parent element, which is not ok.

Does somebody have any solution to this? It has to be pure HTML & CSS, no JS.

img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

The image is basically in Table thats inside of a div, thats inside of a div.

Not actual code (but simplified version of how it is), as it would take a lot more space:

<div class="blabla">
    <div class="blablabla" style="max-width: 1110px;">
        <table><tr>
            <td> Text, random, ladida, text 
            <img src="random_source.lol"/></td>
        </tr></table>
    </div>
</div>

The thing is, I wan't all images to scale down if needed, not only some.

Thanks.

Ps.: I already googled a lot and red topics here without success.

解决方案

Your code works just fine across browsers.

See this demo: http://jsfiddle.net/abhitalks/mxmzjnaL/1

Problem is with your table. Give your table and/or td some size and a table-layout:fixed; to your table.

See this: http://jsfiddle.net/abhitalks/mxmzjnaL/2

Relevant CSS:

table {
    table-layout: fixed;
    width: 50%;
}
td {
    width: 100%;
}
img {
    max-width: 100%;
    height: auto;
    line-height: 0;
    border: 0;
}

Note: Use percent units for the width of table to keep it fluid.

.

这篇关于IE和FireFox中的流体图像（最大宽度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！