 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
datalova
Joined: 06 Jun 2009
Posts: 1
|
 Posted: Sat Jun 06, 2009 2:06 pm setting auto image sizing for different size monitors |
 |
|
|
HI,
I'm trying to design a page in css/html and would like to have the images fit visitor's screens when clicked. each image has its own page. Some are horizontal, some are veritcal. I had set the w and h to 100%, but for the vertical shots, doesnt seem to make them fit the screen; you still wind up scrolling. Then I tried a different percentage.. still nada! Any help appreciated.
Thank you for your time.
Here is my code..page is not online yet:
<!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">
<!--
body {
font: 100% Lucida Bright;
background: #000;
margin: 0;
padding: 0;
text-align: center;
color: #ffffff;
}
.twoColElsLt #container {
width: 85em;
background: #000;
margin: 0 auto;
border: 1px solid #000000;
text-align: left; }
.twoColElsLt #sidebar1 {
float: left;
width: 12em;
background: #000;
padding: 15px 0;
}
.twoColElsLt #sidebar1 h3, .twoColElsLt #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}
.twoColElsLt #mainContent {
margin: 0 1.5em 0 13em;
}
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColElsLt #container #sidebar1 h3 em {
font-family: Lucida Bright;
}
.oneColLiqCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColLiqCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
-->
</style><!--[if IE]>
<style type="text/css">
.twoColElsLt #sidebar1 { padding-top: 30px; }
.twoColElsLt #mainContent { zoom: 1; padding-top: 15px; }
</style>
<![endif]--></head>
<body class="twoColElsLt">
<div id="container">
<div id="sidebar1">
<h3><em>'CLIMB</em>'</h3>
<p><strong>Print Size</strong>: </p>
<p>4.6Ft W x 6FT H</p>
<p><strong>UnFramed:</strong><strong>$1200 (USD)</strong><br />
<strong>Shipping Cost:</strong> <strong>$15</strong></p>
<p><strong>Framed $1500 (USD)<br />
Shipping Cost:</strong></p>
<p><img border="0" width="145" height="75" src="angels_clip_image001_0000.gif" /><br />
<img border="0" width="107" height="34" src="angels_clip_image002_0000.gif" alt="Self Publishing Company Visa / MasterCard" /></p>
<p><a href="http://www.pamsplace.org/index.html">Pam’s Place Inc;</a></p>
<p><strong><a href="http://www.pamsplace.org/gallery.html">Back to Gallery</a></strong></p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<p><img src="../Pauls_photos/Paul_Photos_Titled/Photos 4-09/climb.JPG" width="42%" height="111%" /></p>
<!-- end #mainContent --></div>
</div>
<!-- end #container --></div>
</body>
</html> |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4288
Location: MS
|
| Posted: Sun Jun 28, 2009 8:18 am |
|
|
|
Setting a height in percents does not work. Haven't checked, but that may be a doable in CSS 3.0. Try this code although a server side script would be better.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<!-- Brewed on 6/28/2009 11:04:38 AM -->
<title>Image - Autosize Script</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function ResizeThem()
{
var maxheight = 100;
var maxwidth = 100;
var imgs = document.getElementsByTagName("img");
for ( var p = 0; p < imgs.length; p++ )
{
if ( imgs[p].getAttribute("alt") == "user posted image" )
{
var w = parseInt( imgs[p].width );
var h = parseInt( imgs[p].height );
if ( w > maxwidth )
{
imgs[p].style.cursor = "pointer";
imgs[p].onclick = function( )
{
var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
iw.focus();
};
h = ( maxwidth / w ) * h;
w = maxwidth;
imgs[p].height = h;
imgs[p].width = w;
}
if ( h > maxheight )
{
imgs[p].style.cursor="pointer";
imgs[p].onclick = function( )
{
var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
iw.focus( );
};
imgs[p].width = ( maxheight / h ) * w;
imgs[p].height = maxheight;
}
}
}
}
</script>
</head>
<body onLoad="ResizeThem()">
<img src="http://img509.imageshack.us/img509/7512/spammerss3.gif" alt="user posted image"/>
<img src="http://img297.imageshack.us/img297/4980/funnyhilaryclintonib7.gif" alt="user posted image"/>
<img src="http://img297.imageshack.us/img297/1334/bgfractalfc5.jpg" alt="user posted image"/>
</body></html> |
Adjust these variables as needed:
var maxheight = 100;
var maxwidth = 100; |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
