Anzeige

Media Querys - Bilder ab bestimmer Auflösung skalieren

Media Querys - Bilder ab bestimmer Auflösung skalieren | PSD-Tutorials.de

Erstellt von Refus, 08.07.2013.

  1. Refus

    Refus aka Noisy

    Dabei seit:
    16.03.2006
    Beiträge:
    900
    Geschlecht:
    männlich
    Ort:
    Frankfurt
    Kameratyp:
    Canon 550D
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    Moin moin,

    hab eine kleine Frage zu Media Querys bzw. wie ich folgendes Problem elegant damit umsetzen kann, möglichst ohne Einsatz von JavaScript.

    Die Seite ist wie folgt aufgebaut:
    3 Spalten: Menü | Bilder | Text
    Sowohl Menü, als auch Text haben eine feste Breite. Die gesamte Seite hat ebenfalls eine feste mindestbreite von 1024px. Variable ist die Größe der Bilder, die maximal auf 700px skaliert werden sollen, minimal sind die 425px. Die Zahlen sollten aber bei Beantwortung der Frage hoffentlich nur eine untergeordnete Rolle spielen.
    Vorgabe ist jedenfalls, dass die Bilder ab 1200px größer werden. So nicht das Problem, mein Problem ist jetzt eher, dass die Bilder schlagartig groß werden und nicht langsam wachsen. Wie kann ich das am besten bewerkstelligen?

    Mein MQ sieht so aus:
    Code (Text):
    1.  
    2. @media all and (max-width: 1224px){
    3.     body {
    4.         max-width: 1024px !important;  
    5.     }
    6.     .descriptive-img img,
    7.     .gallery-item dt img {
    8.         width: 425px !important;   
    9.     }
    10. }
    11. }
    Und meine normale Definition wie folgt:
    Code (Text):
    1.  
    2. .gallery-item dt img {
    3.     margin: 0px !important;
    4.     min-width: 425px;
    5.     max-width: 700px;
    6.     width: 100%;
    7. }
    Heißt also bis 1224px haben die Bilder eine feste Größe von 425px, dann natürlich schlagartig größer, weil nicht anders definiert. Die Frage ist jetzt wie lasse ich die Bilder nur langsam skalieren.

    Vielen Dank schon mal im vorraus, falls ihr euch unter meiner Beschreibung nichts vorstellen könnt, bring ich das ganze mal abstrahiert online.

    PS: Die Seite soll immer mittig ausgerichtet sein.
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Das funktioniert, indem du die maximale Breite in % definierst.
    Code (Text):
    1.  
    2. img{max-width:100%}
    3.  
    Dann wird das Bild maximal 100% breit. Hat das Bild also 10 * 500px, dann wird es maximal 500px breit. Die Breite definiert sich dabei am übergeordneten div ,wird das prozentuell vergrößert, verkleinert, dann wächst auch das Bild mit.
     
    #2      
  3. Refus

    Refus aka Noisy

    Dabei seit:
    16.03.2006
    Beiträge:
    900
    Geschlecht:
    männlich
    Ort:
    Frankfurt
    Kameratyp:
    Canon 550D
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Okay klingt schon mal gut. Danke. Danke. Die Sache ist nur, dass sich der DIV ab einer Fenstergröße von 1224px; schlagartig von 1024p auf diese 1224px (bis max 1440px) vergrößert.

    Die Seite ist also 1224px breit und zentriert, vergrößert man das Fenster passiert bis 1224px erst mal nichts, erst dann sollen sich die Bilder langsam vergrößern (bis eben eine Contentbreite von 1440px erreicht ist [Bilder sind alle gleich Breit]). Wenn ich diese Einschränkung nicht hätte funktioniert meine Lösung schon, auch ohne MediaQuerys. Aber Zitat "Ne, die wachsen mir zu schnell". Naja, wenn es dazu keine Lösung gibt, dann lass ich das als CSS Fallback drin und steuer die Größe mit JavaScript, ist zwar unschön, aber was solls.

    Ich hab gerade noch versucht dem Wrapper bzw. Body ein Padding für die Seiten zu geben, sodass ich eine Größe von 1224px habe, Problem ist natürlich nur, dass bei kleinrer Auflösung dnan Scrollbalken erscheinen. Aber ich versuch mal diesen Ansatz weiter zu verfolgen.
     
    #3      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Wieso lässt du das div auch ruckartig von 1024 auf 1440px springen? Beschäftige dich einmal etwas eingehender mit responsive Webdesign und vor allem mit relativen Größenangaben. Auch deinem div gibst du natürlich max-width: 1224px und eine width von 100%, dann passt es sich der Größe des Browserfensters an (es ist responsive) und du hast deine gewünschte Lösung.
     
    #4      
  5. Refus

    Refus aka Noisy

    Dabei seit:
    16.03.2006
    Beiträge:
    900
    Geschlecht:
    männlich
    Ort:
    Frankfurt
    Kameratyp:
    Canon 550D
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Wie kontrollieren ich sonst, dass es die richtige Größe hat. Es pringt auch nicht auf 1440px, sonder das soll die maxBreite sein. Das ist genau der Punkt an dem ich nicht weiterkomme, es soll sich eben nicht der Browsergröße anpassen, zumindest nicht unbedingt.
    Vlt. hast du eine Idee wenn du dir die Seite mal anguckst, ein Link dazu findest du unter [entfernt] (sry, wg. Verlinkung, aber keine Lust, dass wenn man danach sucht das Forum angezeigt wird - rankt zu gut ;))

    Alternativ könnte ich noch mehrere Querys ausgeben für bestimmte Größen, dann springen die Bilder nur leicht, auch nicht optimal-.
     
    Zuletzt bearbeitet: 09.07.2013
    #5      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.049
    Geschlecht:
    männlich
    Ort:
    Ö
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Werde dir bitte klar, was du überhaupt willst:

    Du redest zuerst ein paar mal davon, dass sich die Bilder anpassen sollen, aber eigentlich sollen sie das dann doch nicht? Die Lösung für das Anpassen habe ich dir bereits geliefert. Du kannst natürlich auch mit min-width eine Mindestgröße für das Bild angeben, dann bewegt es sich in dem Bereich.
     
    #6      
  7. Refus

    Refus aka Noisy

    Dabei seit:
    16.03.2006
    Beiträge:
    900
    Geschlecht:
    männlich
    Ort:
    Frankfurt
    Kameratyp:
    Canon 550D
    Media Querys - Bilder ab bestimmer Auflösung skalieren
    AW: Media Querys - Bilder ab bestimmer Auflösung skalieren

    Okay, hab jetzt eine funktionierende Lösung. Verpasse dem Body ab 1224px eine max-width und ein padding von 100px links und rechts. Es wird dann erst ab einer Browserweite ab 1224px skaliert, auch nicht mehr rückartig (dafür das Padding).

    Hier der entsprechende Teil, kannst es dir angucken, falls es dich noch interessiert wie es funktionieren soll. Trotzdem vielen Dank, dass du dir die Zeit genommen hast mein Problem zu verstehen und mir zu helfen :)

    Code (Text):
    1.  
    2. @media all and (max-width: 1224px){
    3.     body {
    4.         max-width: 1024px !important;  
    5.     }
    6.     .descriptive-img img,
    7.     .gallery-item dt img {
    8.         width: 425px !important;   
    9.     }
    10. }
    11. @media all and (min-width: 1224px){
    12.     body {
    13.         max-width: 1440px;
    14.         padding: 0 100px;
    15.     }
    16. }
    17.  
    Den Link nehm ich in ein paar Stunden raus.
     
    #7      
x
×
×