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

Question

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

<!-- 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可使它们保持内联，但不会缩小。帮助不大？

Answer 1

你想要这样的东西吗？

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;
}

Answer 2

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

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

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