Question

我有一个div，在CSS3文件中分配了背景图像。图像是响应式的，因此它会根据屏幕尺寸进行缩放，但容器会保持所有屏幕尺寸的高度。

我需要知道是否有办法使容器响应以及背景图像。

HTML：

<div class="responsive> </div>

CSS3：

.responsive {
    background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
    border: 1px solid red;
    background-size: contain;
    width: 100%;
    height: 270px;
}

我必须使用background-image选择器而不是img src标签。这是fiddle file。

谢谢。

Answer 1

这可以在要保持固定比率的元素内部添加一个虚拟元素。如果您指定padding-top或padding-bottom作为百分比，那就是容器元素的宽度，然后将容器元素的高度保持在固定的比率。

Regex regex = new Regex(@"[\d+]\s+");

CSS：

<div id="responsive">
    some text
    <div id="dummy"></div>
</div>

工作示例：

https://jsfiddle.net/098jj61q/

<强>现金：

Answer 2

是的，这是正确的。根据@Paulie_D，您无法使用背景图片。根据您的要求，您只能使用 img 标记来执行此操作。

你需要做什么，不使用div只是通过将图像视为块元素来使图像响应，

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

或者如果你坚持使用背景图像划分然后覆盖背景图像并将最小高度设置为，

div.mydiv {
    background:url(background_image.jpg);
    background-repeat:no-repeat !important;
    background-size: cover !important;
    background-position:center center !important;
    min-height:300px;
}

如何使div容器响应？

2 个答案: