html - 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 向下推。将空白设置为 nowrap 使它们保持内联，但不会缩小。一点帮助？

Answer 1

您为图像提供了 100 像素的最小宽度，因此显然当 div 的宽度小于 200 像素（在您的问题中为 110 像素）时，第二个图像将下降到另一行。如果你想缩小它，你应该删除min-width: 100px图像上的规则并将它们设置width为 50%，因为现在 - 使用 100% - 它们将与父容器一样宽。

我还建议您对代码进行另一项改进。您不需要这些规则width:100%; display:block，因为这些是所有块元素的默认值——div包括在内。

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

Answer 2

Do you want something like this?

jsFiddle: http://jsfiddle.net/jplahn/4h9Vy/

Try resizing the width of the parent container (in my 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;
}