Responsieve Webpaginaontwerp - Afbeeldingen

Gebruik de eigenschap width

Als width Eigenschap ingesteld op percentage en de hoogte ingesteld op "auto", zal de afbeelding reageren op het uitbreiden of krimpen:

Voorbeeld

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

Probeer het zelf

Let op, in het bovenstaande voorbeeld kan het beeld groter worden dan zijn oorspronkelijke grootte. In de meeste gevallen is een betere oplossing om over te schakelen op het gebruik van max-width Eigenschap.

Gebruik de eigenschap max-width

Als je de eigenschap max-width instelt op 100%, zal de afbeelding indien nodig krimpen, maar zal nooit groter worden dan zijn oorspronkelijke grootte:

Voorbeeld

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

Probeer het zelf

Voeg een afbeelding toe aan de instantiepagina

Voorbeeld

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

Probeer het zelf

Achtergrondbeeld

Het achtergrondbeeld kan ook reageren op het aanpassen van de grootte en schaalverhouding.

Dit zijn de drie verschillende methoden die we tonen:

1. Als je background-size Als de eigenschap ingesteld is op "contain", zal het achtergrondbeeld schalen en proberen overeen te komen met het inhoudsgebied. Het beeld behoudt echter zijn aspectverhouding (het verhoudingsverhouding tussen breedte en hoogte van het beeld):

Dit is de CSS-code:

Voorbeeld

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

Probeer het zelf

2. Als background-size het attribuut is ingesteld op '100% 100%', wordt de achtergrondafbeelding uitgerekt om de hele inhoudsruimte te bedekken:

Dit is de CSS-code:

Voorbeeld

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

Probeer het zelf

3. Als background-size Als de waarde van het attribuut 'cover' is ingesteld, wordt de achtergrondafbeelding geschaald om de hele inhoudsruimte te bedekken. Let op, de waarde 'cover' behoudt de verhouding van de lengte en breedte en kan een deel van de achtergrondafbeelding knippen:

Dit is de CSS-code:

Voorbeeld

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

Probeer het zelf

Bereid verschillende afbeeldingen voor voor verschillende apparaten

Een groot beeld past perfect op een groot computerscherm, maar is nutteloos op kleine apparaten. Waarom laden we een groot beeld als we het moeten verkleinen? Om de belasting te verminderen of om andere redenen, kunt u media queries gebruiken om verschillende afbeeldingen op verschillende apparaten weer te geven.

Dit is een groot beeld en een klein beeld, die op verschillende apparaten worden weergegeven:

Voorbeeld

/* Voor breedtes kleiner dan 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Voor breedtes van 400 pixels of groter: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Probeer het zelf

U kunt media queries gebruiken min-device-width in plaats van min-width om de apparaatbreedte te controleren in plaats van de browserbreedte. Vervolgens blijft de afbeelding onveranderd wanneer u de browservenstergrootte aanpast:

Voorbeeld

/* Voor apparaten kleiner dan 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Voor apparaten van 400 pixels en groter: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Probeer het zelf

HTML5 <picture> element

HTML5 heeft <picture> element, dat u in staat stelt meerdere afbeeldingen te definiëren.

browserondersteuning

38.0 13 38.0 9.1 25.0

<picture> Het effect van het element is vergelijkbaar met <video> en <audio> Elementen. We hebben verschillende bronnen ingesteld, en de eerste bron met matchprioriteit is de momenteel gebruikte bron:

Voorbeeld

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Probeer het zelf

srcset Eigenschappen zijn verplicht, ze definiëren de bron van het beeld.

media Eigenschappen zijn optioneel, ze accepteren CSS @media regel media queries gevonden in

Tip:U moet ook <picture> Browserdefinitie van elementen <img> Elementen.