Question

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

这就是我所拥有的：

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>：

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

如果您删除了{{1}}规则，并且该元素没有内容，则它会垂直缩小为零，并且您的背景图片将消失。

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属性？

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

3 个答案: