Question

我有一个网格，其中一个div占30％左右，另一个占70％。在30％div中，我有4个垂直堆叠的图像。在70％div中我有内容。如何动态调整大小并均匀裁剪4个图像，使它们等于70％内容div的高度。我知道我可以手动调整图像大小，但我希望它们能够在添加或删除内容时自动调整。此外，设计是响应性的。这是一个jsfiddle：

http://jsfiddle.net/fETtm/

这是我的HTML：

<section>
    <div id="inner-content" class="wrap">
        <aside class="fourcol first">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
        </aside>

        <article class="eightcol">
            <h3>H3 Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </div>
</section>

感谢您的帮助。

Answer 1

overflow: hidden会删除所应用元素之外的任何内容（此处为.wrap您的容器）。

演示：http://jsfiddle.net/fETtm/1/

通过从流中移除图像（position: absolute），只有正确的列仍在流中，并将定义其容器的大小。现在，此框外的任何图像都不会显示当左侧列从流中移除时，您的文本现在占据其容器的整个宽度，因此它需要padding-left（与图像宽度相同的值）。

HTML 与您的相同

<强> CSS：

.wrap {
    position: relative;
    overflow: hidden;
    outline: 1px dashed purple;
    max-width: 1140px;
    width: 96%;
    margin: 0 auto;
}

.fourcol {
    width: 31.491712705%;
    position: absolute;

}

.eightcol {
    width: 65.74585634900001%;
    position: relative;
    float: left;
    margin-left: 2.762430939%;
    padding-left: 31.491712705%;
}

.first {
    margin-left: 0;
}

如何根据另一个div的高度动态调整一个div中的4个图像？

1 个答案: