CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr.2
Mr.2

Reputation: 155

How to centre and scale up/down image within a resizing DIV

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.

Upvotes: 3

Views: 1030

Answers (5)

Maroshii
Maroshii

Reputation: 4017

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.

Upvotes: 0

AmGates
AmGates

Reputation: 2123

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.

Upvotes: 2

Max
Max

Reputation: 4636

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/

Upvotes: 0

user405398
user405398

Reputation: 

img {

      margin : 0 auto;
      display:block;
}

give it a try.

position your div as you want.

Upvotes: 0

dip1232001
dip1232001

Reputation: 240

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.

Upvotes: 0

Related Questions