Question

我有2列的布局，它的意思是在右边有文本，在左边有图像。但是，图像必须具有响应性，并且整个图像可能是可见的，也可能不是必需的。由于不能保证每个图像的外观，因此我将左列设置为背景图像。但问题是，图像并非始终保持顶部对齐。

我尝试将vertical-align: top设置为左列div，但这没什么区别。我会给背景图片一个固定的宽度/高度，但结果可能并不总是预期的，因为在较小的屏幕上背景图片可能会被切掉太多。

我只在左栏中使用一个图像，但是由于它是要使其对齐并由其父容器“裁剪”的，因此也可能导致对齐问题。另外，在移动设备中，左列移到了右列的上方，可以看到更多图像。

这是一个小提琴：

.product-txt-right {
  display: flex;
  flex-direction: column;
  max-width: 52%;
  min-height: 516px;
  justify-content: center;
  padding-left: 88px;
  padding-bottom: 90px;
}
@media screen and (max-width: 1024px) {
  .product-txt-right {
    min-height: 381px;
    padding-left: 0;
    padding-bottom: 49px;
    margin-left: -27px;
  }
}
@media screen and (max-width: 768px) {
  .product-txt-right {
    min-height: 383px;
    padding-left: 0;
    margin-left: -27px;
    padding-bottom: 49px;
  }
}
@media screen and (max-width: 767px) {
  .product-single-description div:nth-child(2) {
    margin-bottom: 0;
  }
}

.product-single-description {
  display: flex;
  flex-direction: row;
  margin-right: 0px;
  margin-top: -66px;
  padding-top: 66px;
}
@media screen and (max-width: 1024px) {
  .product-single-description {
    margin-top: 0;
    padding-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .product-single-description {
    margin-top: 0;
  }
}
@media screen and (max-width: 425px) {
  .product-single-description {
    display: block;
  }
}

.product-detail-gallery {
  min-height: 516px;
  max-height: 800px;
  width: 48%;
  background-repeat: no-repeat;
  background-size: 147%;
  background-position: top right;
}
@media screen and (max-width: 1024px) {
  .product-detail-gallery {
    min-height: 383px;
    background-size: 140%;
    background-position: 115% 54%;
  }
}
@media screen and (max-width: 768px) {
  .product-detail-gallery {
    min-height: 383px;
    width: 85%;
    background-size: 151%;
    background-position: 107% 63%;
  }
}
@media screen and (max-width: 425px) {
  .product-detail-gallery {
    width: 100%;
    min-height: 286px;
    background-size: 93%;
    background-position: -381% 79%;
  }
}
@media screen and (max-width: 375px) {
  .product-detail-gallery {
    width: 100%;
    min-height: 286px;
    background-size: 104%;
    background-position: 571% 80%;
  }
}
@media screen and (max-width: 320px) {
  .product-detail-gallery {
    width: 100%;
    min-height: 286px;
    background-size: 119%;
    background-position: 130% 82%;
  }
}

<div class="product-single-description">

  <div class="product-detail-gallery" style="background-image: url(https://i.postimg.cc/prvG5f85/wowza-gball-main.png)">
  </div>
  <div class="product-txt-right">

    <h2>Mauris neque nisi</h2>
    <p>Fermentum a congue vel, semper eget libero. Donec aliquam, velit sed imperdiet pretium, urna elit lobortis erat, id feugiat velit arcu id purus. Sed a accumsan tortor. Ut turpis magna, sagittis sed libero at, hendrerit semper urna. Vivamus venenatis eget diam ac varius. Mauris id consectetur mi. Cras sapien neque, placerat et mauris eu, iaculis consectetur mi. Phasellus eu eros lacinia, rutrum ex in, dignissim lacus. Suspendisse enim ex, imperdiet ut scelerisque nec, laoreet ut libero</p>
    <p>Fermentum a congue vel, semper eget libero. Donec aliquam, velit sed imperdiet pretium, urna elit lobortis erat, id feugiat velit arcu id purus. Sed a accumsan tortor. Ut turpis magna, sagittis sed libero at, hendrerit semper urna. Vivamus venenatis eget diam ac varius. Mauris id consectetur mi. Cras sapien neque, placerat et mauris eu, iaculis consectetur mi. Phasellus eu eros lacinia, rutrum ex in, dignissim lacus. Suspendisse enim ex, imperdiet ut scelerisque nec, laoreet ut libero</p>
    <p>Fermentum a congue vel, semper eget libero. Donec aliquam, velit sed imperdiet pretium, urna elit lobortis erat, id feugiat velit arcu id purus. Sed a accumsan tortor. Ut turpis magna, sagittis sed libero at, hendrerit semper urna. Vivamus venenatis eget diam ac varius. Mauris id consectetur mi. Cras sapien neque, placerat et mauris eu, iaculis consectetur mi. Phasellus eu eros lacinia, rutrum ex in, dignissim lacus. Suspendisse enim ex, imperdiet ut scelerisque nec, laoreet ut libero</p>
  </div>
</div>

理想情况下，如果图像可以保留为背景图像并且在左列顶部对齐时以某种方式响应，那将是完美的。但是，如果这不可能并且需要其他方法，那仍然可以。

Answer 1

您当前的代码中有许多用于调整background-position的媒体查询。如果您希望它始终在顶部对齐，并且不需要在所有宽度上看起来都一样，那么为什么不将其设置为始终位于顶部呢？

如果您希望不考虑宽度显示整个图像，可以将背景宽度设置为100％，并包括该部分的最小高度。

始终保持背景图片在div顶部对齐，同时避免文本重叠

1 个答案: