3 Image layout - Center image larger and higher z-

问题:

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

回答1:

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:

回答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%;
}

as shown in the fiddle: https://jsfiddle.net/fce2n85s/1/

回答3:

nothing change in your code just add this css in your css code. if it's works answer me !

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