如何裁剪不拉伸背景图像

Question

I want to use a background image to my section element with width:100% and height:40% .

So i used CSS3 and used this solution:

background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;

It worked nice!

My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.

Is there ant way that i can achieve this?

FIDDLE

Answer 1

Unfortunately you cannot do something like

background-size: cover 40%;

cause you'll loose the 100%

the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container, setting also width: 100%; and height : 40%; for the same.

But what you can do is

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％，图片就会以800x300px的尺寸填充div。

Answer 3

You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.

You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)

Here is 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

Use an inner div to get the crop effect:

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

Use the :before pseudo class

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

This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html