How to make background image take full width without cropping?

问题

We have set an image as a background image using the following code below and place text on top of it. Is there a way to display the image as a background without the "cropping" regardless of the height of the content on top of the image?

A pattern that occurs is that as the content grows so does the height of the image. If the solution requires that we get rid of that, then I am okay with that.

Note: images will not always be the same size.

Current results

Desired results

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

<div class="banner">
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

回答1:

By using a percentage value in padding-bottom value, the percentage is calculated from the width of the element, not from height, as one might think.

Which means

padding-bottom: 42.773%; /* (438 × 100 / 1024) */

... will always have a minimum height allowing it to display the uncropped image (which, in your case has 1024px × 438px).

.min-ratio {
  padding-bottom: 42.7%;  /* (height × 100 / width) */
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}

.banner__content {
  position: absolute;
  background-color: #00000065;
  color: white;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
}

@media(max-width: 600px) {
  .banner__content {
    position: static;
  }
  .min-ratio {
    background-size: cover;
    padding-bottom: 0;
  }
}

.banner__content>* {
  align-self: stretch;
}

<div class="min-ratio" style="background-image: url(https://media.istockphoto.com/vectors/people-large-group-vector-id519533182)">
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

However, you'll need to stop the image from repeating vertically, using background-repeat:no-repeat so that when the div gets too tall (on mobile, for example) it doesn't repeat the image.

The above technique allows you to set a minimal ratio on an element, without having to hard-code width or height values across different @media responsiveness intervals.

Since stack snippets looks down, here's the fiddle: https://jsfiddle.net/websiter/mek0chne/4/

回答2:

You could use an padding in .banner

.banner {
  position: relative;
  display: block;
  padding : 50px 0;
}

回答3:

one way to do this if you don't know what's the height of the image is going to be , you can use an image instead of a div with background and set its position to absolute : Fiddle

.banner {
  position: relative;
  display: block;
}

.banner:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner__image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner__content {
  padding: 200px;
  position: relative;
  max-width: 900px;
  text-shadow: 0 0 20px rgba(0,0,0,.6);
  margin: 0 auto;
  padding: 0 15px;
  z-index: 2;
  color: white;
}

#bg{
  position: absolute;
  width: 100%;
}

<div class="banner">
  <!--
  <div class="banner__image" style="background-image: url('https://media.istockphoto.com/vectors/people-large-group-vector-id519533182')"></div>
  -->
  <img src="https://media.istockphoto.com/vectors/people-large-group-vector-id519533182" id="bg"/>
  <div class="banner__content">
    <h1>Compellingly seize high-payoff supply chains</h1>
    <h2>Compellingly underwhelm extensive technology rather than low-risk high-yield manufactured products. Phosfluorescently brand just in.</h2>
  </div>
</div>

回答4:

You should look at the max and minimum height attributes in css for your class:

.banner

in addition you can also look at the background-repeat css attribute to prevent the image from repeating or alternatively to repeat on both or only on the x or y axis.

I can provide some code if you like but these are very self explanatory, there may be more elegant solutions but this will help you achieve what you're looking for.

Repeat: https://www.w3schools.com/cssref/pr_background-repeat.asp

Height: https://www.w3schools.com/cssref/pr_dim_min-height.asp https://www.w3schools.com/cssref/pr_dim_max-height.asp

回答5:

Then do not use the image as a background image. Use it as an normal image.

<div class="banner__image">
    <img src="url of the image">
</div>
<div class="banner__content">
    <!-- Your content here -->
</div>

And for the CSS

.banner__image img{
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}
.banner__image{
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
}
.banner__content{
    z-index: 3;
}

Now this should work

来源：https://stackoverflow.com/questions/50007304/how-to-make-background-image-take-full-width-without-cropping

标签

html

css

image