Filling a div with an image (ignoring proportions)

Question

I'm trying to fill a parent <div> with an image, while completely ignoring proportions. I know that it will look ugly at certain dimensions, I just want to see if it's possible at this point. As you can see, the image is scaling, rather than stretching to my demands (Chrome): http://jsfiddle.net/qdzaw/61/

Unfortunately, all I can find online is how to do this while maintaining proportions :/

<img class="someimage" src="imgsrc" />

$(window).resize(function() {
    $(".someimage").height($(".someimage").parent().height());     
    $(".someimage").width($(".someimage").parent().width());  
});

It works fine in firefox, the div is completely filled by the image. — Dyn, Jan 19 '13 at 01:20
If your container has defined width and height, setting `$(".someimage").css({ width: '100%', height: '100%' });` should do it http://jsfiddle.net/qdzaw/62/ — Fabrício Matté, Jan 19 '13 at 01:22
If IE support isn't an issue `background-size:contain` will do exactly this. — RayViljoen, Jan 19 '13 at 01:22

score 0 · Answer 1 · edited May 23 '17 at 12:26

0

i think i find your answer in this post: Stretch and scale a CSS image in the background - with CSS only

use a parent div element and this stylesheet:

div {
    width: 100%; 
    height: 100%; 
}

img {
    width:100%;
    height:100%;
}

edited May 23 '17 at 12:26

Community

1
1

answered Jan 19 '13 at 01:26

Benedict Ernst

73
6

score 0 · Answer 2 · answered Jan 19 '13 at 01:47

0

div {
   position:relative;
}
div img {
   position:absolute; 
   top:0; left:0; right:0; bottom:0;
}

answered Jan 19 '13 at 01:47

Kornel

97,764
37
219
309

Filling a div with an image (ignoring proportions)

2 Answers2