在没有内容的div中显示背景图像

Question

我只是有一个带背景图片的div。图像仅显示我是否设置了最小高度，或者我是否设置了div的高度

HTML

<div class='mydiv'></div>

CSS

.mydiv{          
    background-image: url('http://placehold.it/350x150');
    background-size:contain ;
    background-repeat:no-repeat;  

}

这是上面的jsfiddle链接 http://jsfiddle.net/L4pyhjeu/

我实际上是使用bootstrap 3创建一个div。我设置最小高度的问题是在桌面宽度处图像显示正常，但当缩小到移动时，它在我的最小高度变得太高：550px。

所以我的想法是，如果未设置最小高度，图像将以其自身的100％高度宽度显示，这在桌面和移动设备上都很好。

我试过＆amp; nbsp;在div但是没有用，我也试过块显示 - 也没有显示图像。

感谢您的帮助

Answer 1

简单的解决方案是添加媒体查询。例如，在CSS中添加：

@media (max-width: 600px) {
  .mydiv {
    min-height:250px;
    /*etc*/
  }
}

Answer 2

您必须检查网站是在移动设备还是桌面上呈现。对于移动网站，您可以设置高度百分比。对于PC，您可以以像素为单位进行设置。