是否可以使用背景图像制作响应式 div，该背景图像保持背景图像的比例，就像使用 <img> 一样? [英] Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an <img>?

问题描述

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

我要创建的内容类似于此处的标题:下载演示.

Not a a native english speaker so there's probably a better way to shape the question...anyway:

What I want to create is similar to the header here: http://thegreatdiscontent.com/adam-lisagor The header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct. This is made using an and getting the text to appear on the using position: absolute.

But if you use css for the background-image instead of an , you'll get something like this header: http://elegantthemes.com/preview/Harmony/ Resize browser to see parts of the background being left out.

Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link? Or do I have to change how my entire header works and use the for the background for it to show fully in all screensizes?

I would like to have a header background that doesn't leavy anything out, but is fixed like this http://getflywheel.com/ Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.

Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!

解决方案

Here is a nice and simple tip with only css/html:

Ingredients

• Transparent PNG image with the desired ratio (transparent-ratio-conserver.png)

• tag

• Different images for different view-ports (retina.jpg, desktop.jpg, tablet.jpg...)

The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.

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

In the CSS, we set background-size to fit the and we choose the width of our image.

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

and finally, we serve for every view-port the right image:

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

You can download the demo from here.

这篇关于是否可以使用背景图像制作响应式 div，该背景图像保持背景图像的比例，就像使用 <img> 一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！