css - 响应式设计css / html中的背景图像高度

Question

我有一张背景图片。它的大小是宽200px，高120px。我正在重新设计网站以响应。如果我摆脱高度，图像就会完全消失。

这就是我所拥有的：

height: 120px;
background: url('../img/index.png') no-repeat center;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;

如何摆脱高度以使其响应而不丢失图像？

Answer 1

假设您将此样式应用于<div>：

除非您设置一个，否则A<div>没有自己的高度。float假设内容没有通过具有类似效果的规则或其他规则从内容流中删除，它将仅具有其内容的高度。

如果您删除height规则，并且元素没有内容，它将垂直收缩为零，并且您的背景图像将消失。

Answer 2

你可以看看这个：

    background-size: contain;
    background: url('img/index.png') no-repeat center;
    max-width: 120px;
    max-height: 200px;

Answer 3

您是否尝试过查看 max-width 和 max-height 属性？