响应图像格

我有这个标记：响应图像格

<div class="girls" style="text-align:center; margin-top:100px"> 
    <img src="images/1.png" /> 
    <img src="images/2.png" /> 
    <img src="images/3.png" /> 
    <img src="images/4.png" />

和这个CSS（我使用Twitter的引导）：

img { 

    height: auto; 
    max-width: 100%; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic;

}

的图像有等宽和高，并且内联显示。

在我的决议确定，适合整个宽度（1366px），但在较低的分辨率图像不适合。所以，我需要保持的比例在每个屏幕分辨率（低于1366px在我的情况）

我发现这个picturefill

我想这对我来说是有帮助的，但我想，它的一个更简单的解决方案为我的情况，因为我有4个图像，我需要水平显示它们并使它们在每个分辨率上缩放。

谢谢！

来源

2013-04-04 agis

如果您正在使用Twitter的引导，然后用适当的标记像Twitter Bootstrap documentation：

<div class="row-fluid"> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
    <div class="span3"> 
     <img src="http://placehold.it/350x400"/> 
    </div> 
<div>

http://jsfiddle.net/zNLBG/

来源

2013-04-04 22:14:15

您可以将图像的样式width属性设置为25％，而无需指定高度。如果你总是放4张图片，它们的宽度相同，而你的容器div始终为100％，那就行了。

HTH

旧金山

来源

2013-04-04 22:01:20

我一直在努力，在25集图像％并删除高度：auto;但如果我调整了浏览器的大小，仍然崩溃。 – agis 2013-04-04 22:12:47

好吧，我只是试了一下，我不得不注意2件事：1）不要在图像之间留下空间，2）将此样式属性添加到您的容器div：'white-space：nowrap'。对我来说，它甚至可以在调整大衣的同时起作用。 – 2013-04-04 22:41:36

回答

相关问题