how to get image-size at 100%

Member

Herr 2009-09-09, 19:30

Hi all,

I made this code to scale images to fit the screensize of the browser, it works perfect for me, and i would like to integrate in the image.php file of my modificated Zenpage-default theme.

Since i have no knowledge of php, does anyone has an suggestion how to do that? Till now i managed to restyle the theme the way i like it, almost ready, but i'm stuck here.

Thanks a lot in advance!

'<style type="text/css">
html, body {
margin: 0px;
width: 100%;
height: 100%;
background-color: #000;
}
#image {
z-index: 0;
height: 99%;
}
#all {
text-align: center;
position: absolute;
width: 80%;
height: 93%;
overflow: hidden;
right: 1%;
bottom: 6%;
}
</style>
</head>
<body>

<div id="all">

<img src="hor.jpg" alt="" id="image">

</div>
</body>
</html>'

Administrator

acrylian 2009-09-10, 09:04

Well, you will have to do some work. If you don't want images to be upscaled by that css you need to render image in the real size via our custom image functions (see the documentation) to fit the acutal browser window. To find out the browser window (viewport) size you need to use JavaScript to get that info.

Member

Herr 2009-09-10, 09:29

i WANT them to be upscaled by that css, but i dont know where to put those Div's on the image.php page without messing up the php code. I think its simple to do for you guys, corect me if i'm wrong Wink

So, here somewhere in this code it has to happen. There is this 500,500 thing, i dont know how to remove. Sorry for asking questions in this simple way, i really dont know a thing about php. :-S

`


<?php if (!checkForPassword()) { ?>

<?php
if(function_exists("printPagedThumbsNav")) {
printPagedThumbsNav(6, FALSE, gettext('« prev thumbs'), gettext('next thumbs »'), 40, 40);
} ?>

<div id="foto">

<?php if(getOption("Use_thickbox")) {
$thickboxclass = " class=\"thickbox\"";
} else {
$thickboxclass = "";
}
?>
">
<?php printCustomSizedImageMaxSpace(getBareImageTitle(),500,500); ?>

`

Administrator

acrylian 2009-09-10, 09:45

That is pure CSS then. Yyou probably have to address the img tag within the `<div id="foto">`: `#foto img { â€¦ }`

Member

Herr 2009-09-10, 10:23

i tried, but there is still that 500,500) thing that sizes my image to 500px...

Member

micheall 2009-09-10, 11:55

have you tried leaving those blank? i.e. printCustomSizedImageMaxSpace(getBareImageTitle(),,)

Administrator

acrylian 2009-09-10, 12:16

That is why you need to process the images in the size you want. Following the standard our standard functions attach the widht/height to the img tag. You need to built your own using the `get` variants. See the user image size plugin maybe.

Administrator

acrylian 2009-09-10, 12:20

@mciheall: that is pretty useless as the function needs that values to do something. I already told what he has to do, but of coruse without any php knowledge that will be not that easy...

Member

micheall 2009-09-10, 13:11

gotcha, I hadn't tried it, thought it might give the image at natural HxW, but make sense