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

【问题标题】：HTML + resize horizontally aligned imagesHTML + 调整水平对齐图像的大小
【发布时间】：2013-07-24 10:49:59
【问题描述】：

看起来很简单，但我似乎无法弄清楚这一点。我在父 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 使它们保持内联，但不会缩小。一点帮助？

【问题讨论】：

尝试将display:block 和float:left 设置为图像，它们之间的内联“空白”似乎妨碍了您。还设置父overflow:hidden

标签： html css image

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：