logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-15-2011, 08:53 AM   #1
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default Center image with percentage?

Im having trouble centering image with percentage. Ive tried using margin, padding and the <center>, but nothing works with this setup:

CSS:
body {
height:100%;
background-color: #000;
}
.pngfullscreen {
display: block;
position: absolute;
width: 100%;
height : auto;
}
.pngfullscreen {
display: block;
position: absolute;
width: auto;
height : 100%;
}

HTML:
<body>
<center><img src="images/bus-5a.png" class="pngfullscreen" /></center>
</body>
henryhayes is offline   Reply With Quote
Old 10-15-2011, 12:20 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Do you want to center it horizontally and vertically? Anyways... in both cases you'll need to specify the height and width attributes to the img tag.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-15-2011, 12:44 PM   #3
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Horizontal center will do. I was afraid you would say that; specifying height / widht breaks the fullscreen-effect on image which i need.

Any way to keep this and at the same time centering?
henryhayes is offline   Reply With Quote
Old 10-15-2011, 01:47 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Maybe i understand it wrong, but you want the image to be full screen vertically and center it horizontally while keeping the aspect ratio?
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-15-2011, 02:11 PM   #5
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Gentleone, had to read the sentence 3 times, but yes, thats exactly what i need. Do you know how to it?
henryhayes is offline   Reply With Quote
Old 10-15-2011, 04:45 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I don't think it's possible, but I'm in for a little challenge and I'll let you know the outcome.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-15-2011, 05:20 PM   #7
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

Seems like a challenge indeed. Cant find any solutions when googling, except for bg-images. Im centering SWFs in fullscale with a little different piece of code, and i thought i could just insert images into same setup.

But no, the closest ive come so far is above posted code, at least it goes fullscreen. But centering..hmm..

But please post any suggestions, there must be a pure CSS solution to this
henryhayes is offline   Reply With Quote
Old 10-15-2011, 06:00 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

No it's not possible, because you need a width on the image either in the HTML or in the CSS.

This is what I got so far:

Code:
html, body {
    width: 100%;
    height: 100%;
}

body {background-color: #000}

div {
    position: relative;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

img {
    position: absolute;
    height: 100%;
}
HTML Code:
<body>

    <div>

        <img src="images/city_scene.jpg" alt="city scene">

    </div>

</body>
And here you can see it live:
http://www.gentlemedia.nl/test
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-15-2011, 06:31 PM   #9
henryhayes
 
Join Date: Jan 2011
Posts: 57
Default

You are superfast, gentleone!! margin: 0 auto; i had the same thought, did the trick along with adressing html:
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
background-color: #003300;
padding: 0;
margin: 0;
}

.pngfullscreen {
display:block;
width: 100%;
height : auto;
margin: 0 auto;
}
.pngfullscreen {
display:block;
width: auto;
height : 100%;
margin: 0 auto;
}

<body>
<img src="images/bus-5a.png" class="pngfullscreen" width="710" height="460" />

<p> Well thanks for looking into it. Nice picture by the way..!</p>
</body>
henryhayes is offline   Reply With Quote
Old 10-15-2011, 07:46 PM   #10
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by henryhayes View Post
html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
background-color: #003300;
padding: 0;
margin: 0;
}

.pngfullscreen {
display:block;
width: 100%;
height : auto;
margin: 0 auto;
}
.pngfullscreen {
display:block;
width: auto;
height : 100%;
margin: 0 auto;
}

<body>
<img src="images/bus-5a.png" class="pngfullscreen" width="710" height="460" />
</body>
I tried the above but that doesn't work for me... I get one big image and scrollbars all over the place.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:24 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com