Latest web development tutorials

Responsive Web Design - Foto


Verwenden Sie das Attribut width

Wenn die Breite Attribut auf 100% gesetzt wird, wird das Bild mit dem oberen und unteren Bereich der ansprechenden Funktionen entsprechend realisiert werden:

Beispiele

img {
Breite: 100%;
height: auto;
}

Versuchen »

Man beachte, daß als das Originalbild in dem obigen Beispiel, wird das Bild größer sein. Wir können max-width verwenden , um eine gute Lösung für dieses Problem zuzuschreiben.


Mit max-width Eigenschaft

Wenn die max-width-Eigenschaft auf 100% eingestellt ist, wird das Bild nie als seine ursprüngliche Größe größer sein:

Beispiele

img {
max-Breite: 100%;
height: auto;
}

Versuchen »

Bild hinzufügen Seiten

Beispiele

img {
Breite: 100%;
height: auto;
}

Versuchen »

Hintergrundbild

Hintergrundbild kann reagieren oder Zoom zu ändern.

Im Folgenden sind drei verschiedene Methoden:

1. Wenn der Hintergrund-size-Eigenschaft auf "enthalten", wird das Hintergrundbild adaptive Inhaltsbereich Verhältnis sein. Fotos halten die Proportionen unverändert:

Dies ist der CSS-Code:

Beispiele

div {
Breite: 100%;
Höhe: 400px;
background-image: url ( 'img_flowers.jpg ');
background-repeat: no-repeat;
Hintergrund-size: enthalten;
border: 1px solid red;
}

Versuchen »

2. Wenn der Hintergrund-size-Eigenschaft auf "100% 100%" eingestellt ist, wird das Hintergrundbild erweitert werden, um die gesamte Region zu decken:

Beispiele

Dies ist der CSS-Code:

div {
Breite: 100%;
Höhe: 400px;
background-image: url ( 'img_flowers.jpg ');
Hintergrund-size: 100% 100% ;
border: 1px solid red;
}

Versuchen »

3. Wenn die Eigenschaft background-Größe wird auf "abdecken", wird das Hintergrundbild erweiterten Bereich den Hintergrund groß genug sein, um vollständig zu bedecken, so dass das Hintergrundbild. Beachten Sie, dass die Eigenschaft die Proportionen des Bildes bleibt so ein Teil des Hintergrundbildes nicht im Hintergrund Positionierung Bereich angezeigt werden kann.

Dies ist der CSS-Code:

Beispiele

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}

Versuchen »

Verschiedene Geräte zeigen ein anderes Bild

Große Bilder können auf dem großen Bildschirm angezeigt, aber sie zeigen nicht gut auf dem kleinen Bildschirm. Wir brauchen nicht den kleinen Bildschirm in das große Bild zu laden, so dass es die Ladegeschwindigkeit auswirkt. So können wir Medienanfragen, je nach Gerät verwenden, um ein anderes Bild anzuzeigen.

Die folgende große Bild und kleine Bild wird auf verschiedenen Geräten angezeigt werden:

Beispiele

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}

Versuchen »

Sie können Medien-Anfragen min-device-width Ersatz min-width-Attribut verwenden, wird es die Gerätebreite statt des Browser-Breite zu erfassen. Setzen Sie die Browsergröße, Bildgröße ändert sich nicht.

Beispiele

/ * Das Gerät ist weniger als 400px: * /
body {
background-image: url ( 'img_smallflower.jpg ');
}

/ * Geräte größer als 400px (auch gleich): * /
@media nur Bildschirm und (min-Gerät -width: 400px) {
body {
background-image: url ( 'img_flowers.jpg ');
}
}

Versuchen »

HTML5 <Bild> -Element

HTML5 ist <picture> Element kann mehrere Bilder eingestellt werden.

Browser-Unterstützung

Element
<Bild> Nicht unterstützt 38.0 38.0 Nicht unterstützt 25.0

<picture> Element ähnlich dem <video> und <audio> Elemente. Verschiedene Geräte können Ressourcen, Ressourcen werden zunächst bevorzugte Verwendung festgelegt:

Beispiele

<Bild>
<Source srcset = "img_smallflower.jpg" media = "(max-width: 400px)">
<Source srcset = "img_flowers.jpg">
<Img src = "img_flowers.jpg" alt = "Flowers">
</ Bild>

Versuchen »

srcset Eigenschaft muss die Definition der Bildressource sein.

media - Attribut ist optional, in Medien - Anfragen CSS @media Regel Siehe Details.

unterstützen Sie nicht <picture> Browser - Elemente können Sie definieren <img> Element statt.