PDA

View Full Version : Center image with percentage?


henryhayes
10-15-2011, 08:53 AM
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>

gentleone
10-15-2011, 12:20 PM
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.

henryhayes
10-15-2011, 12:44 PM
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?

gentleone
10-15-2011, 01:47 PM
Maybe i understand it wrong, but you want the image to be full screen vertically and center it horizontally while keeping the aspect ratio?

henryhayes
10-15-2011, 02:11 PM
Gentleone, had to read the sentence 3 times, but yes, thats exactly what i need. Do you know how to it?

gentleone
10-15-2011, 04:45 PM
I don't think it's possible, but I'm in for a little challenge and I'll let you know the outcome.

henryhayes
10-15-2011, 05:20 PM
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

gentleone
10-15-2011, 06:00 PM
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:


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%;
}

<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

henryhayes
10-15-2011, 06:31 PM
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>

gentleone
10-15-2011, 07:46 PM
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.

henryhayes
11-09-2011, 06:36 PM
should be working; same code as posted

http://lydsider.dk/

Full code here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

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;
}

</style>
</head>

<body>

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

gentleone
11-09-2011, 07:16 PM
Yes, that works well. But why two .pngfullscreen declerations in the css? I see you only overwrite the width and the height properties with the second one.

henryhayes
11-14-2011, 12:40 PM
You are right; the class can be reduced to this and still working:

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

Another thing, as you pointed out earlier, my code will only work with small size images:

Using a large image like this will make scrolls
<img src="images/4.png" width="1506" height="791" />

Using an image smaller than canvas / browser-window can go fullsize with the code
<img src="images/bus-5a.png" class="pngfullscreen" width="710" height="460" />

gentleone
11-14-2011, 01:29 PM
Another thing, as you pointed out earlier, my code will only work with small size imagesIf you do it with smaller images, then the quality of the image will go bad on big screens. You use the width and height attributes in the HTML, so you are bound to those dimensions. If you use a bigger image, like the one that gives you scrollbars, it's better to leave out the width and height attributes in the HTML and set the dimensions of the image in the CSS with percentages.

henryhayes
11-14-2011, 08:02 PM
Im a little tired today; forgot to add class to large image when testing

<img src="images/4.png" class="pngfullscreen" width="1506" height="791" />

The code DOES size down large images too. No scrolls with class added..

If resolution on images will look terrible on a big monitor, its possible to set a max size in CSS yes?

.pngfullscreen {
display: block;
width: auto;
height : 96%;
margin: 0 auto;
max-width: 500px;
max-height: 365px;
}