Different Screensizes own Image

Post Reply
muehlstein
Posts: 4
Joined: 09 Jul 2011, 16:33

Different Screensizes own Image

Post by muehlstein » 09 Jul 2011, 17:50

If somebody would to know, how to fit one image-sizes for different screen-sizes. This coming Script is
for an image with max 980 Pixel width, but you can switch the values.

This is the complete Script in charset 8859-1, utf-8 would be better, but doesnt work now, hope at a new etg-version.
*** This are comment-lines, doesnt work in html, only for information here.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
<title>title - [#image.filename_no_ext#]</title>
<meta name="description" content="Description">
<link type="image/x-icon" href="favicon.ico" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="../../../template/style_bilder.css">
<script type="text/javascript" src="../../../javascript/head.min.js"></script>

*** With this script you can fit your image, at the last line >1024 you can insert another value for max-width, or you can insert a new line if (screen.height > ???)....  If you dont need the class itext kill this one ***
<script type="text/javascript">if (screen.height <1025 && screen.height >800 ){document.write("<style type='text/css'>.imgsrc{height:550px; width:auto; max-width:980px;}.itext{width:700px;margin-left:auto;margin-right:auto;}</style>");} if (screen.height <801){document.write("<style type='text/css'>.imgsrc{height:400px; width:auto; max-width:980px;}.itext{width:560px;margin-left:auto;margin-right:auto;}</style>");} if (screen.height >1024){document.write("<style type='text/css'>.imgsrc{width:auto; max-width:980px; height:auto;}.itext{width:680px;margin-left:auto;margin-right:auto;}</style>");}</script>

</head>
<body>
<div id="mainpage">
 <div><a class="banner" style="background-image:url('../../../bilder_mainstreams/mst_headbanner/FotoSerie_Bad_Muenster.jpg')" href="../bad_muenster_am_stein.html">Digitalbilder von Bad Muenster am Stein</a>
 </div>
  <div id="image"><h1>[#gallery.title#]</h1>[#imagepage.menubar#]

*** You must insert the class, so the image can be shrinked or stretched ****
   <img class="imgsrc" alt="[#image.exif_image_description#]" title="[#image.filename_no_ext#]" src="../images/[#image.filename#]">

*** The text under the picture with the class itext ***
    <div class="itext">
     <h2>[#image.exif_user_comment#]</h2>
     <h3>ISO[#image.exif_iso#] - F[#image.exif_f_number#] - [#image.exif_exp_time#] - [#image.exif_focal_length#]<br>Picture-ID: [#image.filename_no_ext#]</h3>
    </div>

</div>
 </div><script type="text/javascript">head.js("../../../javascript/piwik.js");<!--mce:0--></script><noscript><p><img src="http://www.muehlstein-online.de/piwik/piwik.php?idsite=1" style="border:0" alt="dslr"></p></noscript>
</body>
</html>

Post Reply