3图像布局 - 中心图像越来越大，Z指​​数也越来越高 [英] 3 Image layout - Center image larger and higher z-index

问题描述

我试图做到这一点

图片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都有一个图像（原始大小相同） / p>

目前的CSS

  .imageBanner {
 display：flex ; 
 align-items：center; 
宽度：100％; 
 max-width：1024px;} 
 
 .imageLeft img {
最大宽度：60％; 
} 
 
 .imageCentre {
 z-index：9999; 
 position：relative; 
} 
 
 .imageCentre img {
 width：100％; 
} 
 
 .imageRight img {
最大宽度：60％; 
 
 
 
 
 
 $ b因此，我所做的是使用flex对齐沿x轴的图像。然后，我给了中心的形象一个绝对的位置，以便z-索引被考虑在内。然而，这是我遇到的问题，图像不像上面的例子。
 
 
 
这是一个例子，如果它有帮助
 
 
 
 
 
 
  .imageBanner {display：flex; align-items：center;宽度：100％;最大宽度：1024px;}。imageLeft img {max-width：60％;}。imageCentre {z-index：9999; 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>  

感谢
Tom

解决方案

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

hide =falsedata-console =truedata-babel =false>

  .imageBanner {display：block;位置：相对;保证金：0汽车;宽度：100％;最大宽度：1024px;}。imageLeft {width：40％;显示：块;位置：绝对;左：0;顶部：30px; z-index：-1;}。imageCentre {width：60％;显示：块;位置：相对; z-index：1; margin：0 auto;}。imageRight {width：40％;显示：块;位置：绝对;正确：0;顶部：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>  

改变左：属性，右图缩进右改右：

I am trying to achieve this

Image 1 and 3 would be slightly hidden behind image 2.

I have this 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>

Simple setup, single containing div with three sub divs each holding an image (identical native size).

Current 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%;
}

So what I have done is aligned the images along the x axis using flex. I have then given the center image a position of absolute so that the z-index is taken into account. However this is where I run into the issue and the images are not laying out like the above example.

Here is a example if it helps

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

I feel like I may be close and will keep trying but any help will be great!

Thanks Tom

解决方案

Did you think about something like this:

.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 image's left indent you can set by change left: attribute, and right image's right indent change right:

这篇关于3图像布局 - 中心图像越来越大，Z指​​数也越来越高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！