3

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.

Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.

I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?

This is the CSS I have so far of the DIV id and the IMAGE class:

#VisitUsSlides {
    height:100%;
    width:100%;
    position:absolute;
    top:0px;
    left: 0px;
}

.resizingImage {
    width:100%;
    min-width:100px;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
}

It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.

Pastor Bones
  • 7,183
  • 3
  • 36
  • 56
Mr.2
  • 155
  • 9
  • 1
    Maybe make JSFiddle of your page, so we have something to work with: http://jsfiddle.net/ – Max Jan 17 '12 at 03:40

5 Answers5

2

Give it a try

<html>
<head>
<style type="text/css">
div
{ 
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center; 
}
</style>
</head>

<body>
<div>
</div>
</body>
</html>

Hope this solves your problem.

AmGates
  • 2,127
  • 16
  • 29
  • It's centering now but it isn't resizing with the window. – Mr.2 Jan 17 '12 at 06:05
  • Hey add the part labelled Edit2 and check – AmGates Jan 17 '12 at 06:26
  • My god, you know what, I added your second edit and it resized but didn't cover the entire screen, so I checked on http://www.w3schools.com to see what the other properties of 'background-size' were, and I found one 'background-size:cover;' and it does EXACTLY what I wanted it to do!!! THANK YOU for getting me within that last step of the answer. I've been stressing over getting this done for a client by the end of the week and now I've got it. Thanks again :D P.S. If you'd like to edit 'contain' to 'cover' I'll accept it as the answer for formality sake ;D – Mr.2 Jan 18 '12 at 00:31
  • Hello Friend, Now I have edited it. You can now accept it as the answer – AmGates Jan 18 '12 at 05:12
0

assuming the div have an id named imageholder

#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}

hope that helps

also while re-sizing the div. set the image max-height and max-width to its original dimension.

dip1232001
  • 240
  • 3
  • 10
  • It didn't work at all, sorry. The DIV will be resizing so it can't have a fixed width or height. – Mr.2 Jan 17 '12 at 03:50
  • try to resize the div with any javascript.and that will resize the image too.some thing like $('#somebuttonclick').click(function(){$('#imageholder').css({width:900,height:900})});just make function like below function resizeDiv(divWidth,divHeight){$(#imageholder).css({width:divWidth,height:divHeight})} – dip1232001 Jan 17 '12 at 04:06
  • also in intial load assign the desired height and width. – dip1232001 Jan 17 '12 at 04:11
  • Yes, but I also need the image not to go out of proportion when this happens. – Mr.2 Jan 17 '12 at 04:16
  • as i said , you have to set the max-width and max-height of the image the original size to get that check it here http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript also change the css , set min and max width to 90% rather than the width and height – dip1232001 Jan 17 '12 at 06:20
0
img {

      margin : 0 auto;
      display:block;
}

give it a try.

position your div as you want.

0

Try this JavaScript:

http://jsfiddle.net/Teak/6yxcG/

I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.

Edit: Try this full page version: http://www.teaksoftware.com/html/

Max
  • 4,529
  • 1
  • 25
  • 29
0

There's a CSS3 property but i'm not sure about the support it has.

.resizingImage {
 height: 100%;
 width: 100%;
 object-fit: contain; /*OR*/
 object-fit: fill; /*there's also an object-position property*/
 }

This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.

Maroshii
  • 3,937
  • 4
  • 23
  • 29