是否可以使用背景图像制作响应div,以保持背景图像与<img>的比例？

Question

不是一个母语为英语的人,所以可能有更好的方法来塑造这个问题......无论如何:

我想要创建的内容类似于此处的标题:http://thegreatdiscontent.com/adam-lisagor 标题图像在所有屏幕尺寸中完全显示,图像的宽高比当然总是正确的.这是使用并使文本出现在使用位置:绝对.

但是如果你使用css作为背景图像而不是a,你会得到类似这样的标题:http://elegantthemes.com/preview/Harmony/ 调整浏览器大小以查看背景的部分内容.

是否可以使用像第二个链接上的background-image css属性来创建一个div看起来和行为类似第一个链接？或者我是否必须更改整个标题的工作方式并使用背景为其在所有屏幕大小中完全显示？

我希望有一个标题背景,不会泄漏任何东西,但是像这样的http://getflywheel.com/固定 到目前为止唯一的想法是制作一个具有正确的图像比例的透明png,然后使用具有背景附件的background-image:fixed.但这似乎并不聪明.

希望我很清楚,我会理解.非常感谢大家!

Answer 1

这是一个很好的简单提示,只有css/html:

配料

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

• 标签

• 不同视口的不同图像(retina.jpg,desktop.jpg,tablet.jpg ......)

我们的想法是打开一个标签,并为其分配一个透明的图像(具有我们想要的比例).我们还添加了class ="responsive-image",这些都是HTML格式的.

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

您可以从这里下载演示.