CSS背景图像适合高度,宽度应按比例自动缩放

Question

CSS背景图像适合高度,宽度应按比例自动缩放

我希望背景图像适合div的高度,有办法做到这一点吗？background-size:cover;只适合宽度和高度自动缩放(我需要相反的效果).谢谢.

Answer 1

我知道这是一个古老的答案,但对于其他寻找此问题的人来说; 在你的CSS尝试:

background-size: auto 100%;

Run Code Online (Sandbox Code Playgroud)

这对我来说非常有用.特别是在我的情况下,当我想要背景图像时,仅根据高度调整大小. (8认同)
这需要 `min-height: 100%` 来处理“比背景高”的情况。 (2认同)

Answer 2

tan*_*zio 35

background-size: contain;

Run Code Online (Sandbox Code Playgroud)

适合我

如果您的图像小于容器的高度,则不起作用.@Ajikan下面的答案将适用于那个(```background-size:auto 100%;```) (8认同)

Answer 3

Bee*_*eep 14

尝试

.something { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;  
}

Run Code Online (Sandbox Code Playgroud)

Answer 4 · 2013-11-20T18:48:44.000997+08:00

小智 7

body.bg {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    background: white url(../images/bg-404.jpg) center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}   
Try This


    body.bg {
    	background-size: cover;
    	background-repeat: no-repeat;
    	min-height: 100vh;
    	background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    }	
Run Code Online (Sandbox Code Playgroud)
    <body class="bg">


    	
    </body>
Run Code Online (Sandbox Code Playgroud)
        
          
        
      
    
  
  
  
    
      
        
        Sim*_*mon
        
         6
      
      
我刚刚遇到了同样的问题，这对我有帮助：
html {
    height: auto;
    min-height: 100%;
    background-size:cover;
}
Run Code Online (Sandbox Code Playgroud)

Answer 5

Sim*_*mon 6

我刚刚遇到了同样的问题，这对我有帮助：

html {
    height: auto;
    min-height: 100%;
    background-size:cover;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，11 月前
查看次数：	85156 次
最近记录：	7 年，6 月前