是否可以使用背景图像制作响应式 div，并像 <img> 一样保持背景图像的比例？

Question

不是以英语为母语的人，所以可能有更好的方法来塑造问题......无论如何：

我要创建的类似于这里的标题：http://thegreatdiscontent.com/adam-lisagor 标题图像以所有屏幕尺寸完全显示，并且图像的纵横比当然总是正确的。 这是使用 an 并让文本出现在 using position: absolute 上。

但是如果你使用 css 作为背景图片而不是 ，你会得到类似这样的标题：http://elegantthemes.com/preview/Harmony/ 调整浏览器大小以查看被忽略的部分背景。

是否可以使用第二个链接上的 background-image css 属性使 div 的外观和行为类似于第一个链接？ 或者我是否必须更改整个标题的工作方式并使用背景才能在所有屏幕尺寸中完全显示？

我想要一个不会留下任何东西的标题背景，但像这样固定http://getflywheel.com/ 到目前为止唯一的想法是制作一个具有正确比例的透明png，然后使用具有背景附件的背景图像：固定。但这似乎不太聪明。

希望我足够清楚，我会被理解。提前非常感谢大家！

Answer 1

这是通过 background-size 属性完成的：

background-size: cover;

Cover 将使图像尽可能小，同时仍覆盖其父级的全部，并保持其纵横比。

您可能还想尝试contain，它可以使图像尽可能大，同时仍然适合父级。

来源

MDN - background-size CSS property

Answer 2

我认为有比contain 或cover 更好的解决方案（顺便说一句，这对我不起作用）。 这是我最近用于徽标的示例：

#logo{
    max-width: 600px;
    min-height: 250px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat center;
    background-size: 100%;
}

所以现在我们有了一个带有背景图片的响应式 div，其大小设置为 div 的全宽。

Answer 3

这是一个简单的技巧，只有 css/html：

成分

• 具有所需比例的透明 PNG 图像 (透明比率conserver.png)

• 标签

• 针对不同视口的不同图像（retina.jpg、desktop.jpg、 tablet.jpg...)

这个想法是打开一个标签并为其分配一个透明图像（具有我们所需的比例）。我们还添加了 HTML 格式的 class="responsive-image"。

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

在 CSS 中，我们设置 background-size 以适应图像并选择图像的宽度。

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
} 

最后，我们为每个视口提供正确的图像：

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
} 

您可以从here 下载演示。