Question

所以基本上我有一个非常大的图像（超过3000 x 2000），我把它设置为背景图像，并希望它与窗口大小调整相应地缩放。但是，即使我将宽度设置为100％并且容器设置为最大宽度100％

，它仍然希望保持原始分辨率（右侧从屏幕上剪下并隐藏）

HTML

<div class="container-fluid">
  <div id="image-container">
  </div>
</div>

CSS

.container-fluid {
  height: 100%;
  width: 100%;
  padding: 0;
  }

#image-container {
  background-image: url(../img/bg.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  }

我确实编辑了bootstrap＆＃39; s .container-fluid以摆脱其默认的15px填充以及它没有宽度或高度的事实。我不确定引导程序是否具有可能导致它的某些属性，但是当我查看调试器时，计算得出的宽度如此巨大的是{{1}中的width属性这只是设置为100％。但它没有设置为比我所知道的视口大的父级。（在容器上设置#image-container只会使图像消失）

Answer 1

使用html, body { height: 100%; } .container-fluid { height: 100%; width: 100%; padding: 0; } #image-container { background-image: url(https://c1.staticflickr.com/9/8270/8998617248_977cfe9d55_b.jpg); -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-repeat: no-repeat; height: 100%; }属性的百分比属性。

Declare @Time as nvarchar(25)
Set @Time = '2015-10-08 19:56:30.0'
Select Cast(@Time As DateTime);

http://www.w3schools.com/cssref/css3_pr_background-size.asp

背景图像不随窗口大小缩放

1 个答案: