Responsivt websted design - Billeder

Brug af width-eegenskaben

Hvis width Egenskab indstillet til procent, og højden indstillet til "auto", vil billedet reagere ved at udvide eller skræmme:

Eksempel

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

Prøv det selv

Bemærk, at i de ovenstående eksempler kan billedet udvide sig til en størrelse, der er større end dens oprindelige størrelse. I de fleste tilfælde er det bedre at ændre til at bruge max-width Egenskab.

Brug af max-width-eegenskaben

Hvis du sætter max-width-eegenskaben til 100%, vil billedet skræmmes i nødvendighed, men vil aldrig udvide sig til en størrelse, der er større end dens oprindelige størrelse:

Eksempel

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

Prøv det selv

Tilføj et billede til instans websiden

Eksempel

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

Prøv det selv

Baggrundsbilledet

Baggrundsbilledet kan også reagere på ændringer i størrelse og skala.

Disse er de tre forskellige metoder, vi viser:

1. Hvis du sætter background-size Indstilningsværdien "contain" betyder, at baggrundsbilledet vil skaleres og forsøge at matche indholdets område. Dog vil billedet beholde sin bredde-højde-forhold (proportionalforholdet mellem billedets bredde og højde):

Dette er CSS-koden:

Eksempel

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

Prøv det selv

2. Hvis background-size værdien sættes til "100% 100%", vil baggrundsbilledet strækkes for at dække hele indholdsområdet:

Dette er CSS-koden:

Eksempel

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

Prøv det selv

3. Hvis background-size Hvis værdien for "cover" sættes, vil baggrundsbilledet skaleres for at dække hele indholdsområdet. Bemærk, at "cover"-værdien bevarer højde-for-bredde-forholdet og kan beskære en del af baggrundsbilledet:

Dette er CSS-koden:

Eksempel

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

Prøv det selv

Forbered forskellige billeder til forskellige enheder

Det store billede vises perfekt på store computerskærme, men er ikke nyttigt på små enheder. Hvorfor indlæse et stort billede, når det skal缩放? For at reducere belastningen eller af andre grunde kan du bruge medieforespørgsler til at vise forskellige billeder på forskellige enheder.

Dette er et stort billede og et lille billede, der vises på forskellige enheder:

Eksempel

/* For bredde mindre end 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* For bredde på 400 pixel eller mere: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Prøv det selv

Du kan bruge medieforespørgsler min-device-width i stedet for min-width at kontrollere enhedens bredde i stedet for browserens bredde. Så når du justerer browserens vinduesstørrelse, vil billedet ikke ændre sig:

Eksempel

/* For enheder med mindre end 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* For enheder med 400 pixel og større: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Prøv det selv

HTML5 <picture> element

HTML5 har introduceret <picture> element, som lader dig definere flere billeder.

browser understøtter

38.0 13 38.0 9.1 25.0

<picture> elementets funktion ligner <video> og <audio> Elementer. Vi har indstillet forskellige kilder, og den første kilde med højeste prioritet er den brugte kilde:

Eksempel

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

Prøv det selv

srcset Egenskaben er obligatorisk, og den definerer billedets kilde.

media Egenskaben er valgfri, og den accepterer værdier, der kan være CSS @media regel fundet i medieforespørgslerne.

Tip:Du bør også tilføje til dem, der ikke understøtter <picture> Browserdefinerede egenskaber for elementer <img> Elementer.