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规则，并且该元素没有内容，它将垂直收缩为零，并且您的背景图像将消失。