Make image responsive maintaining aspect ratio, with padding either side

Question

Here is a link to the working pen: https://codepen.io/Adam0410/pen/OBqRRN

HTML

<div id="imgWrapper">
  <img src="https://thestoryengine.co/wp-content/uploads/2017/11/The-crossroads-Section-images-02.png">
</div>

CSS

#imgWrapper {
  display: flex;
  justify-content: center;

  width: 100%;

  padding: 0 20px;
}

#imgWrapper img {
  width: 100%;
  max-width: 1660px;
  height: auto;
}

I don't want the image to exceed its original width (hence max-width) but I want it to scale down to the width of the viewport while maintaining its aspect ratio. Currently, the height does not scale with the width, why is this?

score 2 · Accepted Answer · answered Oct 27 '18 at 16:25

2

Why do you need display flex to imgWrapper? Change it to block and it will work as expected. In case you need flex in there add it to other wrapper.

#imgWrapper {
  display: block;
}

answered Oct 27 '18 at 16:25

Mārcis P

316
3
10

I need it to be flex so the image is centered on desktop when it doesn't take up the full width of the screen – Adam Griffiths Oct 27 '18 at 16:28

score 0 · Answer 2 · answered Oct 27 '18 at 16:41

0

What about using the vm unit to your #imgWrapper making it always responsive:

#imgWrapper {
 display: flex;
 justyfy-content: center;
 vm: 100%;
 padding: 0 20px;
}

answered Oct 27 '18 at 16:41

Matt

492
3
15

Make image responsive maintaining aspect ratio, with padding either side

2 Answers2