CODEWITHSUNDEEP
htmlcss
Александр Ступак
Александр Ступак

Reputation: 11

Weird scroll behavior with fixed size container of a changing img

I have a page with 100% height and width, img container with fixed size and an img that changes every second. Img is centered vertically and horizontally inside its container.

The problem is that when you scroll down half a cat, scroll starts jumping up and down when img changes.

Can someone explain this behavior? I have a codepen illustrating the issue.

html:

<div class="to-change-container">
  <img class="to-change"></img>
</div>
<div class="height-stratcher"></div>

css:

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: auto;
}

.to-change-container {
  height: 300px;
  width:300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.height-stratcher {
  height: 1000px;
}

.to-change {
  max-height: 100%;
  max-width: 100%;
}

js:

picLinks = [
  'https://www.meme-arsenal.com/memes/43cdd26dcc65986fac314bcab0d4d2be.jpg',
  'https://pngriver.com/wp-content/uploads/2018/04/Download-Red-Cat-PNG.png',
  'https://www.meme-arsenal.com/memes/d5054013f48d02a72a054bae89a15992.jpg'
]

setInterval(()=> {
  let element = document.getElementsByClassName('to-change')[0];

  element.src = picLinks[Math.floor(Math.random()*10) % 3];
}, 1000);

UPD

Setting overflow: hidden seems to fix the issue shown in the original codepen. Adding changing text before the image breaks it again.

Also image does not seem to affect image container dimensions.

Is there a way to fit image into container without cropping and stratching it?

Upvotes: 1

Views: 353

Answers (4)

Marcel Kirsche
Marcel Kirsche

Reputation: 455

The scroll bar jumps due to the images being different in their height. If you want to keep the scroll bar, you need set a fixed height for the images. Try this:

.to-change-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.to-change {
  height: 300px;
  width: auto;
}

Otherwise, set overflow: hidden; as the other answers pointed out.

Upvotes: 0

Develliot
Develliot

Reputation: 11

limco is correct 

.to-change-container {
  overflow: hidden;
}

Will solve your problems.

The issue is with flex box and the fact the the images from the API are all different sizes and are expanding the containing div. Display flex doesn't behave like display block sizes can vary when the children change.

If you are worried about cropping with overflow hidden you could always choose to set the to-change-container to display:block and set the image inside to 100% width and auto height, there are a few different strategies you could use.

Upvotes: 1

demkovych
demkovych

Reputation: 8827

You need to make your image responsive and you can achieve it with this styles:

.to-change-container img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

Upvotes: 0

limco
limco

Reputation: 1410

The big cat face image is bigger than the others and seems to be affecting the height.

Try this:

.to-change-container {
  overflow: hidden;
}

Upvotes: 0

Related Questions