Scale image properly but fit inside div

Question

I am making an image gallery. This is the HTML for the image:

<div style="width: 84%; height: 100%; float: left; text-align: center;"><img
id="mainimage" style="height: 100%;" 
src="http://www.gymheroapp.com/workouts/img/spinner.gif"/></div>
<!-- Loading spinner is temp image, will be replaced by Javascript later -->

It works fine when the image is square, or the width is not too much more than the height. It breaks when the width is too great, though. Example of image overflowing:

image overflowing

Is there a way I could check whether there is overflow within my Javascript? Something like this:

image.setAttribute('height', '100%')
image.removeAttribute('width')
if (image.isOverflowing()) {
    image.setAttribute('width', '100%')
    image.removeAttribute('height')
}

Even better, is there any way to scale the image properly but fit it withing the containing div?

Possible duplicate http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery — JohnJohnGa, Jan 20 '13 at 14:16
@JohnJohnGa That's a completely different question. I don't want scrollbars. I want to resize my image. Also I am not using JQuery. — tckmn, Jan 20 '13 at 14:17
Ah, I gave an answer that resizes them, but in jquery. I've deleted it. — Popnoodles, Jan 20 '13 at 14:23
@popnoodles No wait! That was helpful. I can change it to vanilla JS. Undelete it and I will accept it :) — tckmn, Jan 20 '13 at 14:25
oh ok. I've forgotten how to traverse up to parent using vanilla. If you know what you're doing no problem. — Popnoodles, Jan 20 '13 at 14:26
@popnoodles I have access to the parent element and I know it won't change so it's good. :) Also it's just `element.parentNode` — tckmn, Jan 20 '13 at 14:27

Popnoodles · Accepted Answer · 2016-08-10T15:58:06.043

16

jquery example

Best fit:

$('img').on('load',function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio<pratio) css={width:'auto', height:'100%'};
    else css={width:'100%', height:'auto'};
    $(this).css(css);
});

Edit to account for caveat where image is in cache

$('img').on('bestfit',function(){
    var css;
    var ratio=$(this).width() / $(this).height();
    var pratio=$(this).parent().width() / $(this).parent().height();
    if (ratio<pratio) css={width:'auto', height:'100%'};
    else css={width:'100%', height:'auto'};
    $(this).css(css);
}).on('load', function(){
    $(this).trigger('bestfit');
}).trigger('bestfit');

edited Aug 10 '16 at 15:58

answered Jan 20 '13 at 14:21

Popnoodles

28,090
2
45
53

Thanks, your solution helped me. Just a question, will this work for all these conditions: 1. Image greater than the parent ? 2. Image smaller than the parent ? 3.Image equal to the parent? – Rutwick Gangurde Feb 04 '13 at 08:27
1

@Rutwick Yes, it does. – tckmn Jul 17 '13 at 11:33
This is brilliant, compact and exactly what I wanted. Thanks. – zeppelin Dec 08 '14 at 17:48
Anyone looking to use this, beware of the "Caveats of the load event when used with images" on https://api.jquery.com/load-event/ – dentarg Aug 10 '16 at 13:52

Chris Visser · Answer 2 · 2014-06-20T10:59:04.613

7

Heres a simple CSS solution:

html, body { height: 100%; }
#gallery { height: 100%; width: 100%; position: relative; }

#gallery img {
  /* CSS Hack will make it width 100% and height 100% */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  /* Maintain aspect ratio */
  max-height: 100%;
  max-width: 100%;
}

<div id="gallery">
  <img src="http://cl.vvmonnickendam.nl/files/large/87" alt="Awesome blabla gedoe">
</div>

Fiddle example

edited Jun 20 '14 at 10:59

answered Jan 20 '13 at 14:30

Chris Visser

1,607
12
24

Note that, designing with jquery is a bad practish when it can be done in CSS. – Chris Visser Jan 20 '13 at 14:31
This makes sense and I agree if it can be done with CSS it's better to do so but if the image is smaller than the div it doesn't work. – Popnoodles Jan 20 '13 at 14:34
1

just make it width 100% :p – Chris Visser Jan 20 '13 at 14:39
Making the width 100% would cause it to overflow if the resulting height was greater than that of the div – Popnoodles Jan 20 '13 at 16:34
Did you even check the example? Their is no way you can make it overflow its containing div and it will always keep its aspect ratio. – Chris Visser Jan 20 '13 at 16:57
Yes I did. "just make it width 100%" what will happen then if the image's relative height is greater than its container? Let's say the container is 400w x 300h, the image is 200w x 200h it shows too small. So "just make it width 100%", okay now the height is 400 - it's overflowing. – Popnoodles Jan 21 '13 at 08:22
Ah yup.. Correct. There is a CSS hack to overcome this problem. See my edited post. – Chris Visser Jan 21 '13 at 11:14
That's simply because the max-width of the image prevents it to scale further.. Try changing the image to a hd – Chris Visser Jan 25 '13 at 09:45
Great CSS only solution ! – Stephan Mar 26 '15 at 01:19

Scale image properly but fit inside div

2 Answers2