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%;
}

Answer 2

问题是由background-size: 100%规则造成的。

您应该考虑使用CSS3 background-size替代方案。请特别注意cover：

.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;
}

jsFiddle Demo

Answer 3

<强> DEMO

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

将min-height设置为background-image。您必须设置background-size: cover;

如果您使用background-size: contain，这将与background-size:100%;类似，因此请避免使用它。

Answer 4

https://jsfiddle.net/itaymer/t8tLg9sz/1/

https://jsfiddle.net/itaymer/t8tLg9sz/1/embedded/result/

.wrapper { width: 90%; margin:0 auto; } 
.slider { 
    overflow:hidden;   
}
.slider:before {
    content:'a';
    display:block;
    height:100%;
    min-height:100px;
    width:100%;
    min-width:100px;
    background-image:url(http://derailed.progressionstudios.com/wp-content/uploads/2014/02/shutterstock_120154516-2000x700.jpg);
    background-size:cover;
    background-repeat:no-repeat;
}

最小高度为背景大小

4 个答案: