3 图像布局 - 中心图像更大和更高的 z-index答案

【问题标题】：3 Image layout - Center image larger and higher z-index3 图像布局 - 中心图像更大和更高的 z-index
【发布时间】：2017-04-24 05:03:53
【问题描述】：

我正在努力实现这一目标

图片 1 和 3 会稍微隐藏在图片 2 后面。

我有这个 html

<div class="imageBanner">
           <div class="imageLeft">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageCentre">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageRight">
              <img src="https://unsplash.it/600/400/">
           </div>
        </div>

简单的设置，一个包含三个子 div 的 div，每个子 div 包含一个图像（相同的原生大小）。

当前的 CSS

    .imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

   .imageLeft img{
    max-width: 60%;
}

.imageCentre {
    z-index: 9999;
  position: relative;
}

.imageCentre img{
    width: 100%;
}

.imageRight img{
    max-width: 60%;
}

所以我所做的是使用 flex 沿 x 轴对齐图像。然后我给中心图像一个绝对位置，以便考虑 z-index。然而，这是我遇到问题的地方，图像的布局不像上面的例子。

如果有帮助，这里是一个例子

.imageBanner {
    display: flex;
    align-items: center;
    width:100%;
    max-width: 1024px;
}

.imageLeft img{
    max-width: 60%;
}

.imageCentre {
    z-index: 9999;
  position: relative;
}

.imageCentre img{
    width: 100%;
}

.imageRight img{
    max-width: 60%;
}

<div class="imageBanner">
               <div class="imageLeft">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageCentre">
                  <img src="https://unsplash.it/600/400/">
               </div>
               <div class="imageRight">
                  <img src="https://unsplash.it/600/400/">
               </div>
</div>

我觉得我可能很接近并且会继续尝试，但任何帮助都会很棒！

谢谢汤姆

【问题讨论】：

我已经回答了一个类似的问题。看看stackoverflow.com/questions/40875381/stacking-some-images/…。也许它会帮助你

标签： html css image layout flexbox

【解决方案1】：

你有没有想过这样的事情：

.imageBanner {
    display: block;
    position: relative;
    margin: 0 auto;
    width:100%;
    max-width: 1024px;
}

.imageLeft {
  width: 40%;
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
   z-index: -1;
}

.imageCentre {
    width: 60%;
  display: block;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.imageRight {
  width: 40%;
 display: block;
  position: absolute;
  right: 0;
  top: 30px;
   z-index: -1;
}
img {
    width: 100%;
}

<div class="imageBanner">
           <div class="imageLeft">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageCentre">
              <img src="https://unsplash.it/600/400/">
           </div>
           <div class="imageRight">
              <img src="https://unsplash.it/600/400/">
           </div>
        </div>

左图的左缩进可以通过改变left:属性来设置，右图的右缩进改变right:

【讨论】：

这看起来很有希望，我唯一注意到的是，如果我们超过 1024px 的最大宽度，布局似乎会中断。无论如何，一旦它达到这个大小，我们可以阻止它进一步调整大小？
已将 position: relative; margin: 0 auto; 添加到父 div。看看sn-p
感谢您回到我身边，我确实设法到达了这个阶段，它现在似乎正在工作，已经接受了这个作为答案。再次感谢！

【解决方案2】：

     .imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

img {
  border: 5px solid red;
  width: 100%;
  height: auto;
}
 .imageBanner {
      display: flex;
      align-items: center;
      width:100%;
      max-width: 1024px;}

img {
  border: 5px solid red;
  width: 100%;
  height: auto;
}

.imageCentre {
  width: 100%;
  z-index: 900;
}

.imageLeft {
  position: relative;
  left: 5%;
}

.imageRight {
  position: relative;
  right: 5%;
}
.imageCentre {
  width: 100%;
}

如小提琴所示：https://jsfiddle.net/fce2n85s/1/

【讨论】：

这看起来也不错，但是一旦屏幕尺寸低于 1020 像素，中间图像的缩小速度似乎比外面的两个图像快得多。

【解决方案3】：

您的代码没有任何变化，只需在您的 css 代码中添加这个 css。如果它的作品回答我！

.imageBanner img { 
    border:solid 5px #000
}
.imageLeft {
    text-align:right;
    margin-right:-5px
}

【讨论】：