如何使 div 容器响应？

Question

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

我需要知道是否有办法让容器和背景图像一样响应。

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;
}

我必须使用背景图像选择器并且没有 img src 标签。 这是fiddle file。

谢谢。

Answer 1

更新 - 2021 年 2 月 3 日

自从我写了原始答案以来，引入了一个新的 CSS 属性 - 'aspect-ratio' - 来解决这个问题。

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

CSS：

#container {
    width: 100%;
    background: hotpink;
    aspect-ratio: 100 / 29;
}

在撰写本文时，此 CSS 属性尚未得到广泛的浏览器支持。

工作示例： https://jsfiddle.net/fu0nL57t/

参考：https://web.dev/aspect-ratio/

================================================ ======

原答案

这可以通过一个额外的虚拟元素来完成，在你想要保持固定比例的元素内。如果您将 padding-top 或 padding-bottom 指定为百分比，则表示容器元素的宽度，然后将容器元素的高度保持在固定比例。

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

CSS：

#responsive {
    display: inline-block;
    position: relative;
    width: 100%;
    background: url('https://s20.postimg.org/o09gf7fvx/bag.jpg') no-repeat center top;
    background-size: contain;
}

#dummy {
    padding-top: 29%;
}

工作示例：

https://jsfiddle.net/098jj61q/

致谢：

• http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

• http://alistapart.com/article/creating-intrinsic-ratios-for-video

Answer 2

是的，它是正确的。根据@Paulie_D，你不能用背景图片来做到这一点。根据你的要求，你只能使用 img 标签来做到这一点。

你必须做的，不使用 div 只是通过将图像视为块元素来使图像响应，

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

或者如果你坚持对背景图像使用除法，那么覆盖背景图像并将 min-height 设置为，

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