css - 背景尺寸的最小高度

Question

如何设置背景尺寸的最小高度？
我在 css 上有一个背景图片，我给了它 background-size:100% 但是当我将浏览器调整到较低的宽度时，我希望高度停止在某个点

.wrapper { width: 90%; margin:0 auto; } 
.slider { 
    background-image:url(image.jpg);
    background-size:100%;
    background-repeat:no-repeat;
    min-height:200px;  
}

例子: http://jsfiddle.net/3yonr0wa/

Answer 1

在您的代码中尝试 background-size:cover; 而不是 100%

DEMO

CSS:

.slider {
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    min-height:200px;
}

编辑: 已更新 Demo

CSS:

.slider {
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
   min-height:200px;  
  margin: 0 auto;
  max-height: 600px;
  max-width: 1000px;
}
.slider:before {
  content: "";
  display: block;
  padding-bottom: 50%;
}