Question

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

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

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

是否可以使用像第二个链接上的background-image css属性来制作div外观并且表现得像第一个链接？或者我是否必须更改整个标题的工作方式并使用背景为其在所有屏幕大小中完全显示？

我希望有一个标题背景，不会泄露任何内容，但会像http://getflywheel.com/一样修复到目前为止，唯一的想法是制作一个具有正确的图像比例的透明png，然后使用具有background-attachment：fixed的背景图像。但这似乎并不聪明。

希望我很清楚，我会理解。非常感谢大家！

Answer 1

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

<强>成分

具有所需比率的透明PNG图像（透明比率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');
    }
}

您可以从here下载演示版。

Answer 2

这是使用background-size属性完成的：

background-size: cover;

封面会使图像尽可能小，同时仍然覆盖整个父图像，并保持其纵横比。

您可能还想尝试contain，这样可以使图像尽可能大，同时仍适合父母。

<强>来源（S）

MDN - background-size CSS property

Answer 3

我认为这是一个比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 4

虽然还有其他解决方案。％会将div缩放为图像大小或宽高比。

.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

}

Answer 5

您只需要将高宽比传递给元素即可。对于图像1400x600;

1400：600 = 98:42

span( style="padding-bottom:42%;
             width:98%;
             background:url('/images/img1.jpg');
             background-size:contain;
             display:inline-block;")

将显示与

相同的内容

img(src="/images/img.jpg" style="width:98%;")

是否可以制作具有背景图像的响应div，以保持背景图像与<img/>的比例？

5 个答案: