CODEWITHSUNDEEP
cssresponsive
Nick
Nick

Reputation: 245

CSS fluid width centered images with off screen areas

enter image description here

Hi guys. Any ideas on how the layout in the diagram can be accomplished? 3 images of equal width, with the middle image centered in the viewport, and having a maximum width of 1200px.

The other two side images appear partially of screen.

As the browser window shrinks below 1200px, the center image fills the screen and scales down with the width of the window.

Am stumped at best way to achieve this with CSS alone!

Thanks!

Upvotes: 1

Views: 273

Answers (2)

Nick
Nick

Reputation: 245

I found a solution after some experimentation. The key was realising that at less than 1200 px the side images are not visible on screen at all, so can be hidden altogether - just making the center image 100%.

So wrapping all 3 images in a 3600px wide absolutely positioned container and centering this with 50% left, margin-left -1800px;

At 1200 px and less, hiding image 2 and 3 altogether and making the container relatively positioned at 100% width.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105903

You can use flex and justify-content along max-width.

animation on :hover and shadow is added to the sample to show behavior

#layout {
  max-width: 1200px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
}

#layout img {
  min-width: 100%;
  max-width: 100%;
}


/* demo purpose */

#layout {
  border: solid;
  box-shadow: 0 0 0 50vw rgba(255, 255, 255, 0.5)
}

#layout img {
  position: relative;
  z-index: -1;
}

#layout:hover img:first-of-type {
  animation: slide 6s infinite steps(3);
}

@keyframes slide {
  from {
    margin-left: 200%;
  }
  to {
    margin-left: -400%;
  }
}

body {
  overflow-x: hidden
}
<div id="layout">
  <img src="http://lorempixel.com/600/200/food" />
  <img src="http://lorempixel.com/600/200/people" />
  <img src="http://lorempixel.com/600/200/fashion" />
</div>

Upvotes: 1

Related Questions