1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Image link won't stay inside constraints (vertical scrollbars)

         

diddly

11:53 am on Apr 14, 2018 (gmt 0)

10+ Year Member



I've been running my head against my monitor for days now, I can't seem to fix it.

I have a little script that creates a simple image gallery with next/previous buttons.

I want the central, main image to stay inside the browser window and resize itself appropriately, no scrollbars.
Whatever I do, images are resized according to width, but the heigth tends to overflow if the aspect ratio is approaching portrait. 


 <div class=content>
 <div class="thumb previous">
 <a href="/galleries/test/5.html" >
 <img title=Previous src="/galleries/test/thumbs/5.jpg" />
 </a>
 </div>
 <div class=full>
 <a href="/galleries/test/files/6.png">
 <img src="/galleries/test/files/6.png" title="Click&nbsp;to&nbsp;View&nbsp;Full&nbsp;Size" />
 </a>
 </div>
 <div class="thumb next">
 <a href="/galleries/test/7.html" >
 <img title=Next src="/galleries/test/thumbs/7.jpg" />
 </a>
 </div>
 </div>

and this CSS: 
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
html {
background:#111;
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
position:relative;
}
.fullpage .content {
height:100%;
width:100%;
display:flex;
align-items: center;
}
.fullpage .thumb {
flex: 0 0 10%;
}
.fullpage .full {
flex: 1 1 80%;
}
img {
display: block;
}
.fullpage .thumb img {
width:100%;
}
.fullpage img {
max-height:100%;
max-width:100%;
 margin: 0 auto;
}
.fullpage .full a {
display: inline-block;
line-height:0;
width:100%;
height:100%;
}

On tall images I'm seeing vertical scrollbars.

I have tried solving this with floating divs, a table, and now with a flex container, but this I cannot iron out.

I have tested on seamonkey 2.49 (mozilla engine, about the same as firefox 52) and falkon 3.0 (qt webengine 5.10.1).

TIA,

d.




[edited by: not2easy at 2:55 pm (utc) on Apr 14, 2018]
[edit reason] See Charter/ToS [/edit]

tangor

11:31 pm on Apr 14, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



img {
max-width: 100%;
height: auto
}

diddly

8:08 am on Apr 15, 2018 (gmt 0)

10+ Year Member



thanks, but there was no change with that.
what i did now:

I had to remove the link the image was encapsulated in.
I would love to keep it, but that link seems to be essential to the problem.

I arrived at this CSS: 
* {
 margin: 0;
 padding: 0;
 box-sizing:border-box;
}
html {
 background:#111;
 height:100%;
 width:100%;
}
body {
 height:100%;
 width:100%;
 position:relative;
}
.content {
 height:100%;
 width:100%;
 display:flex;
 align-items: center;
}
.thumb {
 flex: 0 0 10%;
}
img {
 display: block;
}
.thumb img {
 width:100%;
}
.full {
 flex: 1 1 80%;
 display:flex;
 align-items: center;
 width:100%;
 height:100%;
 padding:1rem;
}
.full img {
 object-fit:contain;
 max-width:100%;
 max-height:100%;
 margin: 0 auto;
}

note the "object-fit" property! didn't know about that one before.

and this HTML: 
<!DOCTYPE html>
<html lang=en>
<head>
 <meta charset=utf-8>
 <link rel=icon type="image/x-icon" href="/assets/NotePaper2_Themes/chipdt4.ico">
 <title>Example Gallery - 7/7</title>
 <link rel=stylesheet href="/galleries/test2/gallery.css" type="text/css">
 <meta name=viewport content="width=device-width, initial-scale=1" />
</head>
<body>
 <div class=content>
 <div class="thumb previous">
  <a href="/galleries/test2/6.html" >
  <img title=Previous src="/galleries/test2/thumbs/6.jpg" />
  </a>
 </div>
 <div class=full>
  <img src="/galleries/test2/files/7.png"/>
 </div>
 <div class="thumb next">
  <a href="/galleries/test2/8.html" >
  <img title=Next src="/galleries/test2/thumbs/8.jpg" />
  </a>
 </div>
 </div>
</body>
</html>

any ideas why the vertical scrollbars reappear when i encapsulate the image in a link?

tangor

8:32 am on Apr 15, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Me? I use just the one image "sizing" method suggested above and define the containers for layout. Big images can get very small, or be just the right size (according to the container). Keeps it simple.

diddly

11:38 am on Apr 15, 2018 (gmt 0)

10+ Year Member



I believe you, and I tried to do it that way once again .
But whichever way I try (and I tried many ways), as soon as i wrap the image in a link, I get vertical scrollbars again.

I could use a helping hand here.

diddly

2:43 pm on Apr 20, 2018 (gmt 0)

10+ Year Member



still hoping...

tangor

2:55 pm on Apr 20, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Do you have any style applied to <a> that could be causing a problem?

not2easy

6:13 pm on Apr 20, 2018 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



The flex-box model has the align-items: property, but that applies to the flex containers, not their contents. When part of the container is assigned a width of 100% and a height of 100% it can be beyond the size of its container which is probably why you see scrollbars. If you remove those height and width settings, assign the flex-box containers as you have, you may notice that tangor's suggestion to use: 
img {
max-width: 100%;
height: auto
}
might actually work as expected. There seems to be some confusion in the element sizing because once you tell it to be flexible you should not assign more specific dimensions.

This is an example of that:
.full img {
 object-fit:contain;
 max-width:100%;
 max-height:100%;
 margin: 0 auto;
}

The "object-fit:contain;" part tells the browser to resize the image to fit the container while maintaining the aspect ratio of the image, but "contain" does not mean it will stay within the flex container which has been assigned a flex width of 80% and a width of 100% with a height of 100%. It is mixing properties of elements and especially when the image is also assigned a height and width of 100%.

Try removing those width:100% and height:100% lines and let flex manage the containers. If you want your images to align center, assign that property to the img element, not its container.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026