adding img tag causes overflow. how to avoid this

Question

I have a page setup to be responsive and allow for the image to be resized to the max of its container but am still having issues with it causing both vertical and horizontal scrollbars to appear and was wondering how to make them go away.

body{
  margin: 0;
  padding: 0;
}
#main {
  display: flex;
  flex-direction: column;
  background-color: pink;
  height: 100vh;
  width: 100vw;
}
footer {
  height: 60px;
  width: 100vw;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

main {
  background-color: lightblue;
  flex-grow: 1;
}
img {
  max-height: 100%;
}

<div id="main">
<main></main>
<footer>
<img src="https://via.placeholder.com/90">
</footer>
</div>

to understand the horizontal one: you are using `vw` unit so if a vertical scroll appear you will automatically have an horizontal one because vw include the width of the scroll ... you can remove `100vw` and simply use `100%` — Temani Afif, Sep 01 '19 at 19:31

score 4 · Answer 1 · answered Sep 01 '19 at 17:13

4

The problem here is that img tags take the default aspect ratio of the image when defining pixels rendered on the page. You have you explicitly size the image to fit inside the parent container. Add the following to the image:

<img src='...' style='height:100%;width:100%;' />

You can bundle those two rules in a css class and apply it to the img.

HTML:

<img src='...' class='fit-parent-container' />

CSS:

.fit-parent-container {
    height: 100%;
    width: 100%;
}

answered Sep 01 '19 at 17:13

Lusayo Nyondo

159
1
1
8

in what instances will max-height behave as expected with img tags? – Quilty Kim Sep 01 '19 at 17:21
max-height will only limit the image height, without explicitly defining the width of the image. In that case, it will still use the image's aspect ratio to determine the actual width of the image. So suppose you have an image that is 500 x 200 pixels, then you define max-height as 100 pixels. It will recalculate the image width to 250 pixels by default, since you didn't specify a max width. Another solution would be to also add max-width:100%, in addition to max-height, but I haven't tried that yet so I'm not sure. – Lusayo Nyondo Sep 01 '19 at 17:28
In other words, since you want your page to be responsive, instead of using height and width, use max-height and max-width accordingly. – Lusayo Nyondo Sep 01 '19 at 17:30
adding max-width:100% unfortunately didn't do it. While I should have probably specified, the scrollbars that I'm referring to are for both vertical and horizontal and I'm puzzled as to why vertical scrollbars would show up even after using max-height. I'll update the original post to include this info. – Quilty Kim Sep 01 '19 at 17:46

adding img tag causes overflow. how to avoid this

1 Answers1