Wie mache ich Bilder responsiv und behalte einen Vollbildhintergrund mit „background-size: cover' bei?

Größe von Bildern automatisch mit der Browsergröße mithilfe von CSS ändern

Bei dieser Frage besteht das Ziel darin, dass die Größe von Bildern automatisch geändert wird, wenn die Größe des Browserfensters geändert wird , während ein Vollbilddesign mit einem Hintergrundgröße: Cover-Effekt beibehalten wird.

Um dies zu erreichen, ändern Sie einfach den CSS-Code wie folgt:

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

Indem Sie die maximale Breite auf 100 setzen Wenn % und Höhe auf „Auto“ eingestellt sind, werden die Bilder entsprechend der Größe des Browserfensters skaliert. Die Breite: auto9; Die Regel gilt speziell für IE8, um ein konsistentes Verhalten in allen Browsern sicherzustellen.

Zusätzlich kann dem Hintergrundbild die Eigenschaft „background-size: cover“ zugewiesen werden, um einen Vollbildeffekt zu erzeugen:

<code class="css">body {
    ...
    background-size: cover;
}</code>

Mit diesen Bei Änderungen wird die Größe der Bilder automatisch angepasst, während der angegebene Hintergrundeffekt beibehalten wird, wodurch ein vollständig responsives Design gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie mache ich Bilder responsiv und behalte einen Vollbildhintergrund mit „background-size: cover' bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!