一个背景图像在两个div之间拆分

Question

第一次为解决方案而苦苦挣扎，所以我再次发布更多信息。提前感谢您的反馈。

在我正在建设的网站上，目前我有2个背景图片设置为2个不同的div，但它们需要在所有设备上完美排列。

目前，背景图像排列在1920px宽和更小，但一旦你开始变得更大，它开始移动。

有人能帮帮忙吗？

请查看它应该与之类似的图像here

​

.productTopSection {
  background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
  min-height: 895px;
  background-size: auto 100%, cover;
}

.mc-key-points {
  background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
  min-height: 895px;
  background-size: auto 100%, cover;
}

@media only screen and (min-width: 1921px) {
  .productTopSection {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
    min-height: 895px;
    background-size: cover;
  }

  .mc-key-points {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
    min-height: 895px;
    background-size: cover;
  }
}

@media only screen and (max-width: 1200px) {
  .productTopSection {
    background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
    background-size: cover;
  }

  .mc-key-points {
    background: none;
  }
}

<div class="productTopSection g-py-200">
  <!-- Content Goes Here -->
</div>


<div class="mc-key-points g-py-200">
  <!-- Content Goes Here -->
</div>

​

Answer 1

@media only screen and (max-width: 767px)
.productTopSection {
    background-size: cover;
    height: 200px;
    min-height: auto;
}

从那时起就没有内容了，如果我错了，我想上面就是way.correct me

Answer 2

你的例子不管用，好吧，没关系，我会试着理解你

1. 他首先鼓吹了解它是如何工作的

​

​

蓝色框架是全屏模式下的div (一个元素用于整个页面)。由于div没有高度，您可以给它一个最小高度或固定高度(属性)，在本例中，它的工作方式与只有背景相同，直到您将某些内容放入div中为止。

在这个阶段，您需要了解您指定的高度不会影响图像本身的高度，也就是说，最小高度不会改变，直到您在其中放入大量文本(这只是一个示例，您可以放置任何有高度的内容)

背景大小在图像中我已经演示了背景大小属性100% 值。从documentation中我们可以看到，我们将宽度设置为100%，并将高度设置为auto。默认情况下，bakcground-image具有相同的位置(背景毒性:0%0%)

如果你是这样写的：

background-size: 100% auto;
background-position: 0 0; // this is not required as this is the default, I am just using this as an example

我们将得到如上图所示的结果，其中图片的宽度将相对于屏幕进行拉伸

好了，现在我们减小屏幕的宽度(div自动开始改变宽度并获取屏幕的宽度)

​

我们看到了什么？下面有一个空白处！在本例中，将高度设置为100%，宽度自动设置为

background-size: auto 100%;

是的，你不应该在你的例子中使用多个背景图片语法

 background-size: auto 100%, cover; // you have one background image

这是您的非工作结果：

​

​

注意，我可以看到你使用的是中心定位，所以你有两个洞！我谨此向你表示祝贺！

你应该怎么做？必须使用图像(html img标记)而不是背景

示例：

<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
    img {
        display: block; // Remove inline native space
        width: 100%;
    }
</style>

或者使用media来控制div的高度(使用vh代替像素或css媒体查询)

<style>
    div {
        /*.....*/
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        min-height: 60vh;
    }

    /* OR */

    div {
        /*....*/
        min-height: 875px;
    }
    @media screen and (max-width: 1024px) {
        div {
            min-height: 500px; 
        }
    }
</style>

Answer 3

虽然我不清楚你是否计划在移动设备上裁剪图片的侧面，但我认为这至少可能会有所帮助-对于这样的事情，我认为你可以通过在HTML中使用<img>标记而不是在CSS中使用background-image来使其更容易。

问题是让高度与宽度成比例缩放，这样图像就能保持它们的纵横比。在你的代码中发生的事情是高度被有效地设置为895px的min-height，它不会更高，除非你添加足够的内容到div。

因此，从移动屏幕开始，你的高度仍然是895px，图像的侧面将被越来越少的裁剪，直到你达到1920px的宽度(图像宽度)。一旦你越过这个，图像将开始延伸到更宽的覆盖范围，顶部/底部将开始被裁剪。图像居中时的上/下裁剪是导致图像中的边缘不对齐的原因。因为当你计划0%的时候，你现在在上面的图像上排了20%，在下面的图像上排了20%。

那么<img>标记如何让这一切变得更容易呢？

它将内容的宽度/高度添加到容器中，并允许容器扩展以适应内容，或强制内容收缩以适应内容。如果你只是在div中抛出一个img，你会看到它将div扩展到img的尺寸。

但是如果您在容器和img上都将宽度设置为100%，它将填充容器的宽度。关键是高度将按比例设置以保持纵横比，div将在高度上扩展以适合所需的img高度，并且您将不会有任何顶部/底部裁剪，因此边缘将对齐。

然后，您只需要在img上放置一个绝对定位的容器，就可以将文本内容放在您想要的任何位置。

如果您尝试在小屏幕上裁剪图像大小(我认为这样看起来会更好)。我建议你在那里使用媒体查询来设置一些断点，也许图片在手机和中心的宽度是120% -你仍然会有这个高度，所以如果它太高了，你需要裁剪来降低高度，我确实有一个想法，但不想太多的范围爬行…

这里有一个使用<img>的例子--这里不再赘述，而是更加简单明了。你可以获得更多的控制-你可以在不同的媒体查询中进行大量的调整来裁剪你想要的内容。

​

.productTopSection, .mc-key-points {
  position: relative;
  width: 100%;
}

.responsive-img {
  width: 100%;
}

.overlay-content {
  position: absolute;

  /* just to get started with the content positioning */
  top: 50%;
  transform: translateY(-50%)
}

<div class="productTopSection g-py-200">
  <img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>


<div class="mc-key-points g-py-200">
  <img class="responsive-img" src="http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>

​