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

Posted 2023-03-06

【中文标题】是否可以使用背景图像制作响应式 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>?

【发布时间】：2013-03-30 18:35:09

【问题描述】：

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

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

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

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

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

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

【参考方案1】：

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

background-size: cover;

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

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

来源

MDN - background-size CSS property

【讨论】：

但是如何使 div 在所有屏幕尺寸上都具有正确的背景图像纵横比？我的意思是，图像的某些部分不会像这里 elegantthemes.com/preview/Harmony

那样留在屏幕之外

它使图像尽可能小，同时仍然覆盖整个父级，并保持其纵横比。因此，如果它与屏幕的纵横比不同，则会发生一些剪辑，但它是最小的。

【参考方案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 的全宽。

【参考方案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 下载演示。

【讨论】：

我就是这样走的。但是如果你检查不同的移动设备，比如（一些糟糕的）android 平板电脑，你会注意到如果 有背景图像，它就不能正常工作。所以我有一个带背景的 ，并且 div 包含透明 png 以保持所有屏幕尺寸的比例。

我在谷歌上搜索了很多关于这个问题的帖子，但也没有一个能解决我的需求。除了一种情况外，您的方式有效：我的背景图像在桌面/移动屏幕之间具有不同的比例。最终的问题是我们无法在 CSS 中更改图像源。

【参考方案4】：

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

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

【参考方案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%;")