Sådan oprettes: Responsivt billede

Lær at oprette responsivt billede med CSS.

Det responsive billede justeres automatisk til skærmstørrelsen.

Juster browservinduesstørrelsen for at se responsiveness:

Lys

Se effekten

Sådan oprettes responsivt billede

1. trin - Tilføj HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

2. trin - Tilføj CSS:

Hvis du ønsker, at billedets responsivitet kan både forstørres og formindskes, skal du sætte CSS' width Egenskaben for 100%,height Indstil til auto:

Eksempel

.responsive {
  width: 100%;
  height: auto;
}

Prøv det selv

Hvis du ønsker, at billedet skal kunne缩소, men aldrig skal forstørres til en størrelse større end dens oprindelige størrelse, skal du bruge: max-width: 100%:

Eksempel

.responsive {
  max-width: 100%;
  height: auto;
}

Prøv det selv

Hvis du vil begrænse det responsive billede til en maksimal størrelse, skal du bruge: max-width Egenskaber samt de pixelværdier, du vælger:

Eksempel

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Prøv det selv

Relaterede sider

Tutorial:CSS billede

Tutorial:CSS responsivt webdesign