N
Netzwerkidi
Hallo zusammen,
Frage an die Spezialisten: Wie frage ich zur Laufzeit die Breite von Fotos (oder anderen Elementen) ab, um dann im Anschluss den Wert weiter verarbeiten zu können?
Ziel der aktuellen Anwendung ist es, die Darstellung auch in heterogenen Bildschirmumgebungen (PC-systembedingt oder Browser wird vom User verändert in Breite und/oder Höhe) immer horinzontal mittig zu halten. Senkrecht ist wohl eh nicht möglich.
Der rote Block unten im Bild muss eine fixe Höhe haben, weil da Texte erscheinen sollen.
Eigentlich klappt das, aber... Die Bildformate, die reinkommen, sind sehr unterschiedlich. Bei den Hochkantformaten ist das alles kein Problem.
Die kommen dann mit den Querformaten, denn dann wird zwar der innere DIV geändert wie man auf der Anlagen erkennen kann, aber das Bild selbst passt sich nicht in der Breite an.
D. h. vice versa, es soll in der Höhe schrumpfen (evtl. verbunden mit einer vertikal zentrierten Ausrichtung mit Margins oben/unten), damit die Abstände links und recht bleiben.
Vielleicht kann mir einen Tipp geben. Wäre echt nett.
Grüße
Idi
Frage an die Spezialisten: Wie frage ich zur Laufzeit die Breite von Fotos (oder anderen Elementen) ab, um dann im Anschluss den Wert weiter verarbeiten zu können?
Ziel der aktuellen Anwendung ist es, die Darstellung auch in heterogenen Bildschirmumgebungen (PC-systembedingt oder Browser wird vom User verändert in Breite und/oder Höhe) immer horinzontal mittig zu halten. Senkrecht ist wohl eh nicht möglich.
Der rote Block unten im Bild muss eine fixe Höhe haben, weil da Texte erscheinen sollen.
Eigentlich klappt das, aber... Die Bildformate, die reinkommen, sind sehr unterschiedlich. Bei den Hochkantformaten ist das alles kein Problem.
Die kommen dann mit den Querformaten, denn dann wird zwar der innere DIV geändert wie man auf der Anlagen erkennen kann, aber das Bild selbst passt sich nicht in der Breite an.
D. h. vice versa, es soll in der Höhe schrumpfen (evtl. verbunden mit einer vertikal zentrierten Ausrichtung mit Margins oben/unten), damit die Abstände links und recht bleiben.
Vielleicht kann mir einen Tipp geben. Wäre echt nett.
Grüße
Idi
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='Content-Language' content='de-DE' />
<title>
</title>
<style type="text/css">
body { margin:0;padding:0;color:f000;background:#333; }
#aussen { height:100% }
#innen { margin-top:5%; margin-left:25%; margin-right:25%; text-align:center; background:white; }
img { height:70%; border:20px solid white; }
#unten { height:65px; background:red; text-align:left; }
#buttons { position:absolute; top:1%; text-align:center; width:100%; }
</style>
<script type="text/javascript">
var a=["http://www.vectordiary.com/isd_tutorials/ebook/apple-skin-tutorial.jpg",
"http://www.videocopilot.net/assets/public/images/products/riotgear/rg_tutorials.jpg",
"http://www.bodehase.de/uploads/sonstiges/buegelperlen-nahaufnahme.jpg",
"http://s3images.coroflot.com/user_files/individual_files/237373_Hnv1_BNtok46hm2DUCc6DATYw.png"];
function zeigBild(b) {
document.getElementById('myImage').src=a[b];
}
/*
function findOffsetPos(obj) {
var curleft=0, curtop=0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj == obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop] ;
}
*/
<!--document.write("Weite: " + Weite + " Höhe: " + Hoehe + " Imagelength: " +il);-->
</script>
</head>
<body>
<div id="aussen">
<div id="innen">
<div id="innen2">
<img id="myImage" src="http://www.vectordiary.com/isd_tutorials/ebook/apple-skin-tutorial.jpg" alt="" />
</div>
<div id="unten">Diverse Textinformationen........... </div>
</div>
<div id="buttons">
<button id="b0" onclick="zeigBild(0)">Zeige Startbild</button>
<button id="b1" onclick="zeigBild(1)">Zeige Bild 1</button>
<button id="b2" onclick="zeigBild(2)">Zeige Bild 2</button>
<button id="b3" onclick="zeigBild(3)">Zeige Bild 3</button>
</div>
</div>
</body>
