如何使背景图像全幅显示而不进行裁剪? [英] 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.

当前结果

所需结果

.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>

推荐答案

使用 padding-bottom 值中的百分比值，该百分比是根据元素，而不是像人们想象的那样来自 height .

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.

哪个意思

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

...将始终具有最小高度，以使其显示未裁剪的图像(在您的情况下为 1024px × 438px ).

... 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>

但是，您需要使用 background-repeat:no-repeat 阻止图像垂直重复，以便当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.

上述技术使您可以在元素上设置最小比例，而不必在不同的 @media 上硬编码 width 或 height 值code>响应间隔.

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.

由于堆栈代码段向下看，所以这里是小提琴: https://jsfiddle.net/websiter/mek0chne/4/

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

这篇关于如何使背景图像全幅显示而不进行裁剪?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！