9

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

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

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

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

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

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

4

5 回答 5

19

这是一个只有 css/html 的漂亮而简单的提示：

原料

  • 具有所需比例的透明 PNG 图像 (transparent-ratio-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');
    }
}

您可以从这里下载演示。

于 2013-06-21T14:15:29.010 回答
3

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

background-size: cover;

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

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

来源

MDN - 背景尺寸 CSS 属性

于 2013-04-08T15:36:37.533 回答
2

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

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

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

于 2013-06-20T14:25:44.380 回答
0

虽然还有其他解决方案。% 将 div 缩放为图像大小或纵横比。

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

}

于 2013-08-05T19:56:33.620 回答
0

您只需要将高宽比传递给元素。对于 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%;")
于 2017-03-07T14:43:31.583 回答