CSS overflow - image won't fully showing in scrollable container

Question

I have an image centered inside a container, but when I increase the width/height of an image, it won't fully showing inside the container.

But when an image is not centered(top left), the image fully showing. Why is that happening?

 

const scaleUp = () => {
  const img = document.getElementById("tree")
  img.style.height = "100%"  
}

const scaleDown = () => {
  const img = document.getElementById("tree")
  img.style.height = "50%"  
}

 .container {
      width: 500px;
      height: 500px;
      background: #f2d0d0;
      overflow: auto;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #tree {
      height: 100%;
      border: 1px solid cyan;
    }

    span {
      width: 200px;
      height: 40px;
      border: 1px solid #333;
      padding: 10px;
      cursor: pointer
    }

<div class="container">
    <img id="tree" src="https://momentum.photos/img/843956cc-70c7-4578-97d5-e95102c0a7e2.jpg" />
</div>

<span onClick="scaleUp()" id="scale_up">scale up</span>
<span onClick="scaleDown()" id="scale_up">scale down</span>

pen

Prakash Rajotiya · Accepted Answer · 2020-12-23 17:20:56Z

2

Height:100% on your #tree selector affecting your layout. Below CSS might help you.

#tree {
 border: 1px solid cyan;
 max-width: 100%;
 height: auto;
 //object-fit: cover; /*uncomment it if you want to fit image in container*/
}

answered Dec 23, 2020 at 17:20

Prakash Rajotiya

1,0435 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rorrry Over a year ago

Thanks, but I wanted to make this full image not like cropped. Can you recommend another way to achieve this?

Prakash Rajotiya Over a year ago

for that, you should have the image size same as the container size. otherwise, you can use the image in the background.

Just Alex · Accepted Answer · 2020-12-23 18:16:02Z

Your border property was the reason for your horizontal scrollbar, and I fixed your vertical scrollbar by giving image max-height and max-width. Let me know if my solution works for you.

Here you go friend, is this what you wanted ? :)

const scaleUp = () => {
  const img = document.getElementById("tree")
  img.style.height = "100%"  
}

const scaleDown = () => {
  const img = document.getElementById("tree")
  img.style.height = "50%"  
}

.container {
      width: 500px;
      height : 500px;
      background: #f2d0d0;
      overflow: auto;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #tree {
    height : 100%;
      max-height: 100%;
      max-width : 100%;
    }

    span {
      width: 200px;
      height: 40px;
      border: 1px solid #333;
      padding: 10px;
      cursor: pointer
    }

<div class="container">
    <img id="tree" src="https://momentum.photos/img/843956cc-70c7-4578-97d5-e95102c0a7e2.jpg" />
</div>

<span onClick="scaleUp()" id="scale_up">scale up</span>
<span onClick="scaleDown()" id="scale_up">scale down</span>

Collectives™ on Stack Overflow

CSS overflow - image won't fully showing in scrollable container

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related