html - 具有响应式网格的图像叠加

Question

我在尝试在响应式 Bootstrap 网格中使用图像覆盖时遇到了问题。当页面全屏显示时，一切看起来都很好，但是当它低于 980 宽度时，图像会从网格底部渗出，但随着页面变小，看起来会越来越好。我知道我可以为此使用媒体查询，但是否有我忽略的解决方案？

HTML:

<div class="row">
    <div class="col-md-6">
        <div class="col-md-12">
            <div class="content-section">
                 <h1>Placeholder</h1>

                <p>Placeholder</p>
            </div>
        </div>
        <div class="col-md-12">
            <div class="content-section">
                 <h1>Placeholder</h1>

                <p>Placeholder</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="col-md-12">
                <div class="content-section">
                     <h1>Placeholder</h1>

                    <p>Placeholder</p>
                </div>
            </div>
            <div class="col-md-12">
                <div class="content-section">
                     <h1>Placeholder</h1>

                    <div class="image-overlay">
                        <img class="bottom img-responsive" src="http://placehold.it/932x468">
                    </div>
                    <p>PlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholderPlaceholderlaceholder</p>
                                                </div>
                </div>
            </div>
        </div>

CSS

.content-section {
    position: relative;
    background-color: #2c2c2c;
    padding: 20px;
    margin-bottom 20px;
}
.image-overlay {
    position: relative;
    margin: 0 auto;
    height: 320px;
}
#image-overlay img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#image-overlay img.top:hover {
    opacity: 0;
}

我在这里创建了一个 JSFiddle:https://jsfiddle.net/1f8cbm2y/

谢谢!

Answer 1

我认为这会给您带来平板电脑分辨率方面的问题。因此，在没有媒体查询的情况下，您可以为平板电脑使用 col-sm-*。

这是 jsfiddle solution .