Css 是否可以像使用<；img>；？

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

我要创建的内容与此处的标题类似： 标题图像在所有屏幕尺寸中都完全显示，当然，图像的纵横比总是正确的。 这是使用，并获得文本显示在使用位置：绝对

但是，如果您将css用于背景图像而不是图像，则会得到如下标题： 调整浏览器大小以查看被忽略的部分背景

是否可以使用第二个链接上的背景图像css属性，使a div的外观和行为与第一个链接类似？ 或者我必须改变我的整个标题的工作方式，并将其作为背景，以便在所有屏幕大小中完全显示

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

---

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

这是通过背景大小属性完成的：

background-size: cover;

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

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

您可能还想尝试

包含
，这样可以使图像尽可能大，同时仍适合父图像

来源

我认为有一个比
包含
或
封面
更好的解决方案（顺便说一句，这对我不起作用）。
以下是我最近用于徽标的一个示例：

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

现在我们有了一个带有背景图像的响应div，它的大小被设置为div的全宽。
这里有一个很好的简单技巧，只使用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">

最后，我们为每个视口提供正确的图像：

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

您可以从下载演示
 尽管还有其他解决方案。
%将根据图像大小或纵横比缩放div

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

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

1400:600=98:42

将显示与相同的内容

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

但是如何使div在所有屏幕尺寸上都具有正确的背景图像纵横比呢？我的意思是，图像的一部分不会像这里那样留在屏幕外吗？它使图像尽可能小，同时仍然覆盖整个父对象，并保持其纵横比。因此，如果它与屏幕的纵横比不同，则会出现一些剪辑，但这是最小的。这就是我的方式。但是如果你查看不同的移动设备，比如（一些蹩脚的）Android平板电脑，你会注意到如果有背景图像，它就不能正常工作。所以我有一个背景，div包含了透明的png以保持所有屏幕大小的比例。我在谷歌上搜索了很多关于这个问题的帖子，没有一篇也解决了我的需要。除了一种情况外，你的方式是有效的：我的背景图像在桌面/移动屏幕之间的比例不同。最终的问题是我们不能在CSS中更改图像源。
img(src="/images/img.jpg" style="width:98%;")