Autor |
Nachricht |
heav
Threadersteller
Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht:
|
Verfasst So 15.01.2012 14:07
Titel Bilder exakt auf Fensterhöhe skalieren |
|
|
Guten Tag,
ich versuche gerade Tumblr (bzw. ein Tumblr Theme) dazu
zu bekommen, mir Bilder horizontal hintereinander anzeigen
zu lassen, was bereits funktioniert, allerdings sollen diese
unabhängig von ihrer Originalgröße alle gleich hoch sein,
und zwar exakt die Höhe des Browserfensters. In Safari
funktioniert das, in Firefox nicht.
Wenn die Bilder nun beim verändern der Fenstergröße
auch noch mitskalieren würden wäre das hervorragend.
Die verwendete Technik ist mir dabei primär mal wurscht.
Dazu kommt, dass ich für FF eine utopische Breite des
bodys angeben muss was dazu führt das diese Breite
auch dargestellt wird. Safari lässt mich, was weitaus
schöner ist, soweit scrollen bis alle Inhalte dargestellt
sind, danach ist Schluss.
http://tidlth.tumblr.com/
Es sollen übrigens nur Bilder geposted werden, sonst nix,
daher ist auf den Rest auch keine Rücksicht zu nehmen.
Und fangt bitte nicht an über Sinn und Unsinn zu diskutieren,
ich weiß das.
Danke
hv.
|
|
|
|
|
WebRex
Dabei seit: 26.07.2011
Ort: -
Alter: 29
Geschlecht:
|
Verfasst So 15.01.2012 14:52
Titel
|
|
|
im IE und Google Chrome sollte es auch nicht funktionieren.
Mit JavaScript die Höhe des Fensters selektieren und den Bildern zuweisen. Hier ein Beispiel anhand von jQuery:
Code: | <!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
overflow-y: hidden;
}
img {
float: left;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').css('height', $(window).height());
});
</script>
</head>
<body>
<img src="bild1.jpg" alt="Bild 1" width="200" />
<img src="bild2.jpg" alt="Bild 2" width="300" />
<img src="bild3.jpg" alt="Bild 3" width="250" />
</body>
</html> |
Zuletzt bearbeitet von WebRex am So 15.01.2012 14:56, insgesamt 3-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
heav
Threadersteller
Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht:
|
Verfasst So 15.01.2012 17:47
Titel
|
|
|
Super, danke!
|
|
|
|
|
WebRex
Dabei seit: 26.07.2011
Ort: -
Alter: 29
Geschlecht:
|
Verfasst So 15.01.2012 18:47
Titel
|
|
|
Mir ist gerade aufgefallen, Du hast auch was von skalieren erwähnt. Wenn jemand das Browserfenster minimiert, würden bei dem von mir gezeigten Code die Bilder gleich groß bleiben (sollten Sie zumindest). Wenn Sie sich der Fensterhöhe anpassen sollen, muss nur das resize-Event definiert werden. Der Code, der sich um das skalieren kümmert, muss (kann) in eine Funktion ausgelagert werden, die dann sowohl beim ready- als auch resize-Event aufgerufen wird.
Der Code dazu sollte so aussehen:
Code:
Code: | function scaleImages() {
$('img').css('height', $(window).height());
}
$(document).ready(function() {
scaleImages();
});
$(window).resize(function() {
scaleImages();
});
|
Grüße,
Nico
Zuletzt bearbeitet von WebRex am So 15.01.2012 18:52, insgesamt 5-mal bearbeitet
|
|
|
|
|
MasterOfDsaster
Dabei seit: 25.03.2008
Ort: Allgäu
Alter: 33
Geschlecht:
|
Verfasst Mo 23.01.2012 12:16
Titel
|
|
|
Habe den Codeschnipsel bei einem meiner Projekte benutzt und bin dabei auf die Frage gestoßen, ob ich auch eine Maximalhöhe festlegen kann? In meinem Fall sind manche der Bilder, die skaliert werden sollen recht klein. Nun werden die auf die Fensterhöhe "hoch"-skaliert. Wie kann ich die "echte" Bilderhöhe als Maximalwert setzen?
Vielen Dank!
PS: Ich würde außerdem gerne eine Grafik verknüpfen - doch bei Klick auf den Hyperlink soll nicht die Grafik im Browser geöffnet werden, sondern sich das "Speichern Unter"-Fenster öffnen. Oder gibt es eine Möglichkeit die automatische Skalierung in Browsern wie Firefox und Chrome (falls man eine Grafik verknüpft wird die Grafik auf die maximale Bildhöhe skaliert) ausschaltet.
Testseite ist unter j o e r gefarmer.de/test.html erreichbar (Leerzeichen eingefügt, damit nicht über Google zu finden, gibt es dazu eine elegantere Methode?)
Zuletzt bearbeitet von MasterOfDsaster am Mo 23.01.2012 12:18, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Bilder skalieren
CSS: 2 Divs - Fensterhöhe und Scrollbar
Photoshop Bilder skalieren
Text + Bilder mit Fenster Skalieren
Bilder skalieren nicht umbrechen
[Flash] dia/slideshow bilder skalieren hilfe!
|
|