0

我有一张背景图片。它的大小是宽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;

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

4

3 回答 3

0

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

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

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

于 2013-10-15T15:34:43.910 回答
0

你可以看看这个：

    background-size: contain;
    background: url('img/index.png') no-repeat center;
    max-width: 120px;
    max-height: 200px;
于 2013-10-15T15:41:53.580 回答
-1

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

于 2013-10-15T15:33:06.803 回答