Question

我想使用section和width:100%的{{1}}元素使用背景图片。

所以我使用了CSS3并使用了这个解决方案：

height:40%

效果很好！

我现在的问题是我想要裁剪背景图像以适合我指定的尺寸。现在图像被拉伸以适应。

我能用这种方法实现这个目标吗？

FIDDLE

Answer 1

很遗憾你不能做像

这样的事情

background-size: cover 40%;

因为你将失去100%

解决方案是这样制作一个单独的图像容器，然后在它（我猜想）文本的元素之后，为图像容器设置简单的background-size: cover;，同时设置width: 100%;和height : 40%;。

但你可以做的是

LIVE DEMO

<section>
  <div class="sectionImage" id="first"></div>
  <div class="sectionContent">1</div>  
</section>

<section>
  <div class="sectionImage" id="second"></div>
  <div class="sectionContent">2</div>  
</section>

<section>
  <div class="sectionImage" id="third"></div>
  <div class="sectionContent">3</div>  
</section>

section{
  background:#444;
  position:relative;
  margin:10px auto;
  height:300px;
  width:800px;
  color:#fff;
}
.sectionImage{
  width: 100%;
  height:30%;
  background: transparent none no-repeat center center;
  background-size: cover;
}
.sectionContent{}

#first{
 background-image: url('1.jpg');   
}
#second{
  background-image: url(2.jpg);
}
#third{
  background-image: url(3.jpg);
}

Answer 2

如果我了解您要执行的操作，只需从背景尺寸中移除40％，图像就会以800x300像素尺寸填充div。

Answer 3

您必须将背景容器放在主容器中。之后，您必须提供主要容器的宽度和高度，并使溢出：隐藏。

然后，您可以使用主容器的宽度和高度来更改裁剪尺寸。（你可以使用宽度：40％;高度：100％）

这是JSFidde。

HTML：

<section id="first">
    <div id="bg"></div>
</section>

CSS：

#first{
  height:300px;
  width:200px;
  overflow:hidden;
}

#bg{
  background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  width:800px;
  height:300px;
}

Answer 4

使用内部div来获得裁剪效果：

Fiddle

<强> CSS

#first{
    height:300px;
    width:800px;
}
#first div{
    width:100%;
    height:40%;
    background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
    background-repeat: no-repeat;
    background-size:100%;
    background-position: 50% 50%;
}

Answer 5

使用:before伪类

#first:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40%;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

这将为您提供许多CSS选项来处理更大/更小的图像，拉伸/裁剪等，而不会弄乱html

如何裁剪不拉伸背景图像

5 个答案:

Fiddle