Mehrere Bilder größe anpassen
TyphoWorld
- html
Guten Tag!
Also ich habe folgendes Problem. Ich setze im Moment 8 Bilder nebeneinander und sorge mit white-space:nowrap; dafür, das diese keinen Zeilenumbruch haben. Jetzt will ich aber, dass diese Bilder sich auch auf die Seitenbreite dann anpassen, und damit auch auf die Höhe. Geht das?
Dankeschön!
@@Kalle Sorglos:
nuqneH
Da frag ich jetzt dich: Häh?
Ich setze im Moment 8 Bilder nebeneinander und sorge mit white-space:nowrap; dafür, das diese keinen Zeilenumbruch haben.
„8 Bilder nebeneinander“ solte doch verständlich sein.
„sorge mit white-space:nowrap; dafür, das diese keinen Zeilenumbruch haben“ ist vielleicht etwas ungeschickt ausgedrückt, aber nur etwas. Es sollte daraus doch klarwerden, dass die Bilder auch bei schmalem Viewport nebeneinander (in einer Zeile) bleiben sollen …
Jetzt will ich aber, dass diese Bilder sich auch auf die Seitenbreite dann anpassen,
… und deshalb soll sich die Bildgröße entsprechend der Viewportbreite anpassen, so dass die 8 Bilder nebeneinander (in einer Zeile) bleiben.
und damit auch auf die Höhe.
Das Seitenverhältnis der Bilder soll erhalten bleiben.
Was hattest du daran nicht verstanden?
Qapla'
Also vielleicht habe ich nur einen Dummen fehler gemacht, aber die Bilder bleiben immer gleich gro´, egal was. Ich habe sie halt mit Photoshop sehr groß gemacht, damit sie hoch auflösend werden.
Hier mein Script
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<STYLE type="text/css">
@viewport {
width: device-width;
zoom:1;
}
</style>
<title>Unbenanntes Dokument</title>
</head>
<body>
<img src="1-1.jpg" /><img src="1-2.jpg" /><img src="1-3.jpg" /><img src="1-4.jpg" /><img src="1-5.jpg" /><img src="1-6.jpg" /><img src="1-7.jpg" /><img src="1-8.jpg" />
</body>
</html>
Ist halt nur Simpel momentan und auch nur zum versuchen. Doch was mache ich falsch?
@@TyphoWorld:
nuqneH
Ich habe sie halt mit Photoshop sehr groß gemacht, damit sie hoch auflösend werden.
Du hast die JPEGs doch hoffentlich stark komprimiert.
Hier mein Script
HTML ist kein Script.
<STYLE type="text/css">
In XHTML gibt es kein STYLE-Element. Warum überhaupt XHTML 1 und nicht HTML5?
@viewport {
width: device-width;
zoom:1;
}
Wen willst du damit beeindrucken?
<title>Unbenanntes Dokument</title>
Wenig sinnvoller Seitentitel.
Doch was mache ich falsch?
Ansonsten nichts. Du machst ja auch nichts. Wolltest du den Bildern nicht eine Breite geben?
Qapla'
[...] Geht das?
Ja, und zwar mit CSS.
MfG
bubble
@@TyphoWorld:
nuqneH
Also ich habe folgendes Problem. Ich setze im Moment 8 Bilder nebeneinander
Bilder gleicher Größe?
Geht das?
Breite in Prozent angeben. Der Whitespace zwischen den Bildern dürfte dabei problematisch werden. Abhilfe wäre, die Bilder floaten zu lassen. Oder Flexbox.
Qapla'