Question

我一直试图解决这个问题一段时间，似乎无法让它发挥作用。基本上我想要彼此相邻的两个图像，它们之间可能有10-15个像素。如果imageContainer尺寸发生变化，图像应缩小但仍然保持彼此相邻。我已经搜索了这个以尝试找到答案，但在这种情况下他们都没有工作。任何人都可以帮我弄清楚我错过了什么。这是一个小提琴http://jsfiddle.net/dcksh6wf/2/

.container {
    width: 100%;
}

.imageContainer {
    width: 5%;
    max-width: 12%;
}

.image {
    display: inline-block;
    float: left;
}

.image img {
    width: 100%;
    height: auto;
}

<div class="container">
    <div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div>
</div>

Answer 1

您必须将内联显示的规则应用于.image而不是.imageContainer。

＆＃13;

.container {
    width: 100%;
}

.image {
    width: 5%;
    max-width: 12%;
    display: inline-block;
    float: left;
    margin-left: 10px;
}

.image img {
    width: 100%;
    height: auto;
}

.image:first-child {
    margin: 0;
}

＆＃13;

<div class="container">
    <div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div>
</div>

＆＃13;

Answer 2

试试这个：http://plnkr.co/edit/5OJf9yQtIE7PmA4PcWEw?p=preview

 <div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div><div class="imageContainer">
        <div class="image"><img src="http://placekitten.com/105/105" /></div>
    </div>

.container {
    width: 100%;
}

.imageContainer {
  display: inline-block;
  max-width: 50%;
}

img {
  max-height: 100%;
  max-width: 100%;
}

图像可以扩展到50％的可用宽度，或它们的自然宽度（即它们的分辨率）。

将包含图像的两个div放在一起并自动缩放

2 个答案: