背景图像协助答案

【问题标题】：Background Image Assistance背景图像协助
【发布时间】：2014-12-30 12:27:39
【问题描述】：

我试图让我的广告牌图像大约 2200 像素 965 像素固定在一个 div 内，以扩大屏幕宽度和 500 像素高度，而不会丢失图像的任何部分。这可能吗，我在完成这个任务时遇到问题。

<div class="billboard"> </div>

css:

height: 500px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
display:block;
width:100%;

【问题讨论】：

标签： css image background

【解决方案1】：

是的，只需将width: 1140px 添加到您的 CSS 代码中，以确保它不会被截断。

【讨论】：

【解决方案2】：

如果这是您想要的，背景图像不会被截断，而是会产生丑陋的输出。

注意：我使用的图片与您提供的尺寸完全相同（2200px x 965px）

.billboard {
  height: 500px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: 100% 500px;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 500px;
  background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG);
  width: 100%;
  display: block;
}

&lt;div class="billboard"&gt;ABV&lt;/div&gt;

如果 sn-p 不起作用，请在此处：JSfiddle

【讨论】：