HTML +调整水平对齐图像的大小

似乎很简单，但我似乎无法弄清楚这一点。我有两个图像在父div内水平对齐。每个img都包含宽度，最小和最大宽度，而父宽度设置为100％。当通过屏幕宽度将父宽度设置为50％时，如何缩小这两个图像？例如：HTML +调整水平对齐图像的大小

<!-- screen resized to 110px in width --> 
<div style="width:100%; display:block"> 
    <!-- actual image width is 200px --> 
    <img src="i.png" style="width:100%; min-width:100px; max-width:200px"> 
    <img src="i.png" style="width:100%; min-width:100px; max-width:200px"> 
</div>

但是，如果父容器不能适应宽度方向，则会将第二个img向下推。将white-space设置为nowrap可以保持内联，但不会缩小。帮助不大？

images wrapping instead of scaling down and staying inline

来源

2013-07-24 worked

尝试设置'显示：block'和'浮动：left'的图像，似乎在用自己的方式让他们之间的内联“空白”。还设置父'overflow：hidden' –

你想要这样的东西吗？

的jsfiddle：http://jsfiddle.net/jplahn/4h9Vy/

尝试调整父容器的宽度（在我的jsfiddle）。

HTML：

<div id="parent"> 
    <!-- actual image width is 200px --> 
    <img class="image" src="i.png" > 
    <img class="image" src="i.png" > 
</div>

CSS：

.image { 
    display: block; 
    float: left; 
    max-width: 200px; 
    width: 50%; 
    position: relative; 
} 

#parent { 
    overflow: hidden; 
    width: 100%; 
    display: block; 
}

来源

2013-07-24 19:47:39

你给了图像的100像素的最小宽度，所以很明显，当div的宽度小于200像素（110px在你的问题）时，第二张图像会掉到另一行。如果你想缩小它，你应该删除图像上的min-width: 100px规则，并将它们的width设置为50％，因为现在 - 100％ - 它们将与父容器一样宽。

我也建议你在代码中另外一个改进。您不需要规则width:100%; display:block，因为这些是所有块元素的默认值 - 包括div。

试一下：http://jsfiddle.net/TMyr9/2/

来源

2013-07-24 19:54:55

HTML +调整水平对齐图像的大小

回答

相关问题