mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 16:42 Benutzername: Passwort: Auto-Login

Thema: Bilder exakt auf Fensterhöhe skalieren vom 15.01.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bilder exakt auf Fensterhöhe skalieren
Autor Nachricht
heav
Threadersteller

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht: Männlich
Verfasst So 15.01.2012 14:07
Titel

Bilder exakt auf Fensterhöhe skalieren

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
WebRex

Dabei seit: 26.07.2011
Ort: -
Alter: 29
Geschlecht: Männlich
Verfasst So 15.01.2012 14:52
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
heav
Threadersteller

Dabei seit: 10.02.2004
Ort: Heimat der Inspiration
Alter: 39
Geschlecht: Männlich
Verfasst So 15.01.2012 17:47
Titel

Antworten mit Zitat Zum Seitenanfang

Super, danke!
  View user's profile Private Nachricht senden
WebRex

Dabei seit: 26.07.2011
Ort: -
Alter: 29
Geschlecht: Männlich
Verfasst So 15.01.2012 18:47
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
MasterOfDsaster

Dabei seit: 25.03.2008
Ort: Allgäu
Alter: 33
Geschlecht: Männlich
Verfasst Mo 23.01.2012 12:16
Titel

Antworten mit Zitat Zum Seitenanfang

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! * Applaus, Applaus *

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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!
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.