CODEWITHSUNDEEP
javascriptjquerycss
Hanna
Hanna

Reputation: 10763

Positioning an image based on its height/width

I'm working on a simple script that acts as a slideshow. It's based on this script.

Background:

Most of these types of scripts (including the more advanced ones) have the issue that they work great with landscape-style images but really mess portrait-style images up. So I'm trying to build something more or less from scratch.

Problem

I want my images centered on the page. So I use position:absolute; and left:50%; and top:50%; which puts left-most and top-most edge of the image in the proper position. But to center it you would need to do left:50% - imageWidth/2 (which obviously doesn't exist in CSS)

So I need to use javascript to get the image height/width and change it's left and top positioning as needed.

Here is my HTML:

<div class="fadewrapper">
    <div class="fadein">
        <img src="../Content/images/samples/1.jpg">
        <img src="../Content/images/samples/2.jpg">
        <img src="../Content/images/samples/3.jpg">
    </div>
</div>

Here is my CSS:

.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}

My knowledge in javascript is limited, but I've found this script (on SO):

var img = new Image();
        img.onload = function () {
            alert(this.width + 'x' + this.height);
        }
        img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

This script works, but I don't know how to use the images on my page and how to then adjust its positioning. Any and all help is very much appreciated.

Upvotes: 0

Views: 1465

Answers (2)

Birdman
Birdman

Reputation: 724

Here you go. This will set the image in the exact center of the wrapper.

 win_width = $('#fadewrapper').width();
 win_height = $('#fadewrapper').height();
 border = $('#framewrapper').css('borderWidth');
 $('.fadein img').each(function(){
     $(this).css({
         'left' : (win_width - $(this).width() - border ) / 2,
         'top': (win_height - $(this).height() - border ) / 2
     });
 })

Here's a jsFiddle working example. It reacts based on the window size. Resize the output window to see it react

Upvotes: 2

Teemu
Teemu

Reputation: 23406

This might be worth of trying:

<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
    <IMG id="your_img_id_1" src="your_img_source" height="100%">
    <IMG id="your_img_id_2" src="your_img_source" height="100%">
    <IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>

Add these positioning rules to your fadewrapper-class, and remove all others. Then make changes needed to top and height values, but don't change the height-attribute values in IMG-elements. IDs can be omitted, if you don't need them.

EDIT:

I'm sorry, I didn't notice to check window resize. Code corrected. Width's shoul'd be OK with smaller window sizes now.

I've tested this in IE, FF, Opera and Chrome. In all those browsers images appear just like I want to. But if I've missunderstood what you'd like to have?

Upvotes: 0

Related Questions