CODEWITHSUNDEEP
javascripthtmlcssimage
Lennart
Lennart

Reputation: 327

Scale and center image in variable-size div using JS

http://jsfiddle.net/3qMnM/1/

HTML:

<div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400">
</div>

CSS:

.image {
height: 100%;
width: auto;
margin-right: 200px;
}


.info-panel {
position: fixed;
width: 200px;
height: 100%;
background-color: red;
right: 0px;
}

I'm trying to scale images down (never up) dynamically to fit into the image-div (without cropping), which is variable in height (100%) and width (set to auto). The image also needs to be centered (vertically and horizontally) and have equal padding of a few pixels top and bottom.

There is an info panel next to the image container as you can see in the fiddle, but I'm not sure if this is relevant.

Do my statements make sense?

Thanks, I have spent way too much time experimenting with this already! :/

Upvotes: 1

Views: 7243

Answers (3)

JAM
JAM

Reputation: 6205

If I understand correctly, you want something like this.

It scales down if the image is too large, but keeps the original size when it fits inside the window. In other words, it never scales up - only down.

It is a combination of CSS and some jQuery:

This short JS centers the image vertically:

function verticallyCenterImage(){
    var $img = $('.image img'),
        windowHeight = $(window).outerHeight();

    if($img.height() < windowHeight){
        var delta = windowHeight - $img.height();
        $img.css('margin-top', (delta / 2) + 'px');
    }else{
        $img.attr('style', '');
    }
}

And this line of CSS keeps the image centered horizontally:

.image {
    padding-right: 200px;
    text-align: center;    /* <- this one */
    max-height: 100%;
    overflow: hidden;
}

And to keep the original size of the image, I just set the max height and width on the img inside the .image class, like so:

.image img {
    max-width: 96%;
    max-height: 96%;
    margin: 2%;
}

You can adjust the size and margins to your needs, just remember to keep them in relation too each other :)

Upvotes: 2

Claudio Bredfeldt
Claudio Bredfeldt

Reputation: 1422

You are mixing px with %. If you want to achieve that only by CSS, you need to use % for both widths:

.image {
    width: 85%;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 15%;
    height: 100%;
    background-color: red;
    right: 0px;
}

... otherwise, you have to use JS to calculate the current available width on the left side and assing it the .image div:

HTML

<div class="info-panel"></div>
<div class="image">
    <img src="http://placehold.it/960x1400" />
</div>

CSS

.image {
    min-height: 600px;
    width: auto;
}

.image img {
    width: 100%;
}

.info-panel {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: red;
    right: 0px;
}

JS (jQuery)

$(document).ready(function() {
    $('.image')
        .css('min-height', 'auto')
        .height($(window).height())
        .width($(window).width() - $('.info-panel').width())
    ;
});

Upvotes: 0

AndersDJohnson
AndersDJohnson

Reputation: 121

Some of the techniques discussed here could work for you: http://css-tricks.com/centering-in-the-unknown/

The trick there is to use table elements, or CSS 2.1 table display.

Edit: More approaches here: http://www.vanseodesign.com/css/vertical-centering/

Upvotes: 0

Related Questions