Accentsconagua

Schneller Tipp Passen Sie Ihre Bilder an

Code
Share

Ein eklatanter Grund, warum viele Entwickler feste Breite gegenüber elastischen Stellen gewählt haben, ist die Tatsache, dass die Verwendung von Inline-Bildern das Layout einer Webseite zerstören kann - ähnlich wie bei einer Rinderherde, die Sie immer wieder in die Leiste tritt. Es macht einfach keinen Spaß. Sicher, Sie können ihre Breite mit Prozent oder Ems angeben, aber diese Methoden sind nicht ideal. Versuchen Sie in solchen Fällen, die Hintergrundtechnik zu verwenden?




Schritt 1: HTML einrichten

Zuerst erstellen wir eine sehr einfache HTML-Datei.

 
 
 
 
 Lorem ipsum dolor sitzt amet, Konsument, der elitiert. Vestibulum ullamcorper magna quis velit. Nam vitae dui und massa convallis vulputate. Aliquam ante magna, fermentum nec, scelerisque eget, semper quis, ipsum Fusce consectetuer enim quis lorem. Morbi elit turpis, folglich ac, lacinia ang, dignissim ac, velit. Proin Mauris Orci, Rutrum A, Suscipit Eu, Sagittis et., Nisi. Quisque bei mi ac magna fermentum elementum.

Schritt 2: Fügen Sie das CSS hinzu

 #container width: 50%; Marge: auto; Polsterung: 1em; Hintergrund: # 3d332a; Farbe: # b8ada2; ?  #image height: 300px; Hintergrund: URL (Girl.jpg) Zentrum ohne Wiederholung;

Damit unser Container div flexibel ist, habe ich die Breite auf 50% des Browserfensters festgelegt. Als nächstes habe ich die Ränder auf auto gesetzt, um den Inhalt zu zentrieren. Die Polsterung, der Hintergrund und die Farbe wirken einfach ästhetisch.

Im div-Tag mit der ID "image" fügen wir das Hintergrundbild hinzu. Der Schlüssel hier ist, dass ich keine bestimmte Breite für das Bild einstelle - nur die Höhe. Wenn Sie das Bild als Hintergrund hinzufügen, müssen Sie sicherstellen, dass Sie es zentrieren (Zentrum ohne Wiederholung). Dies bewirkt, dass der Hauptfokus Ihres Bildes jederzeit angezeigt wird. * Hinweis - Stellen Sie sicher, dass Sie ein Bild verwenden, das den Hauptschwerpunkt in der Mitte hat.

Sie sind fertig

Sehen Sie sich Ihre Arbeit in einem Browser an und vergrößern oder verkleinern Sie das Browserfenster. Es gibt einige Dinge, die Sie bei dieser Methode beachten sollten.

  • Stellen Sie sicher, dass Sie Bilder verwenden, die so breit sind, wie sie jemals sein müssen.
  • Der Mittelpunkt Ihres Bildes sollte der Brennpunkt sein.
  • Zentrieren Sie das Hintergrundbild.
  • Berücksichtigen Sie, dass die maximale Breite Ihres Containers gleich der gesamten Breite des Bildes ist.
  • Erwägen Sie außerdem, eine Mindestbreite hinzuzufügen, um sicherzustellen, dass Ihr Bild nicht zu stark verkleinert wird.

Habe ein schönes Wochenende. Treffen wir uns Montag wieder hier! Übrigens, folgen Sie uns auf TWITTER!

Code
×