Bilder auf volle Breite für Desktop und Smartphone

rernanded · 8. Februar 2014

Hi

habe ansonsten mit css wenig am Hut deswegen meine bescheidene Frage:

Ich habe auf meiner Seite zwei table.

Darin sind zwei img(1.jpg und 2.jpg) eingebaut.

Wie kann ich erreichen das 1.jpg auf 100% der Seitenbreite -egal ob PC,
LapTop oder Smartphone-Bildschirm- sowie 75% der Seitenhöhe skaliert
wird und das 2.jpg zentriert auf den restlichen 25% der Seitenhöhe
angezeigt wird?

MONI

HTML

HTML-Code:
	<body bgcolor="ffffff">




<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="opacity:1.0; z-index:1;">
<tr>
<td align="center" style="vertical-align: middle;">
<img src="1.jpg" border="0">
</td>
</tr>
</table>




<br>




<table align="center" bgcolor="ffffff" border="0" cellpadding="0" cellspacing="0" style="opacity:1.0; z-index:1;">
<tr>
<td align="center" style="vertical-align: middle;">
<img src="2.jpg" border="0">
</tr>
</table>




</body>

Alles anzeigen

wolf · 8. Februar 2014

Ich würde das jetzt aus dem Steh-greif so lösen:

HTML

<img src="1.jpg" border="0">

durch

HTML

<img id="img1" src="1.jpg" border="0">

ersetzen, das Gleiche mit img2 tun.

css :

CSS

#img1{
position: absolute;
width: 100%;
height: 75%;
left: 0px;




}
#img2{
position: absolute;
width: 100%;
height:25%;
left: 0px;
top: 75%;
}

Alles anzeigen

hoffe es funktioniert

-------------------------- So sollte das ganze funktionieren ----------------------------------------------------------------------

HTML

<!doctype html>
<html>
  <head>
    <style type="text/css">
      html,body,img{margin:0;padding:0;}
      #img1{
        position: absolute;
        width: 100%;
        height: 75%;
        left: 0px;
      }
      #img2{
        position: absolute;
        width: 100%;
        height:25%;
        left: 0px;
        top: 75%;
      }
    </style>
  </head>
  <body>
    <img id="img1" src="1.jpg">
    <img id="img2" src="2.jpg">
  </body>
</html>

Alles anzeigen

hier nachzusehen: http://wolf.wolfgang-m.de/beispiele/fullspic.html

rernanded · 9. Februar 2014

Danke Wolf,
klappt prima.

Moni

Bilder auf volle Breite für Desktop und Smartphone

Jetzt mitmachen!

Teilen