Responsivt webbdesign - Bilder

Använd width-egenskapen

Om width egenskapen satt till procent och höjden satt till "auto", då kommer bilden att skalas för att förstora eller förminska:

Exempel

img {
  width: 100%;
  height: auto;

Prova själv

Observera att i de ovanstående exemplen kan bilden förstora till en storlek större än dess ursprungliga storlek. I de flesta fall är det bättre att använda max-width egenskap.

Använd max-width-egenskapen

Om max-width-egenskapen sätts till 100%, kommer bilden att förminskas efter behov, men aldrig förstora till en storlek större än dess ursprungliga storlek:

Exempel

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

Prova själv

Lägg till bild till instanssidan

Exempel

img {
  width: 100%;
  height: auto;

Prova själv

Bakgrundsbilden

Bakgrundsbilden kan också anpassa sig till storleksjustering och skalning.

Detta är de tre olika metoder vi visar:

1. Om du sätter background-size Om inställningen är satt till "contain", kommer bakgrundsbilden att skalas och försöka matcha innehållsområdet. Dock kommer bilden att behålla sitt aspect ratio (förhållandet mellan bildens bredd och höjd):

Detta är CSS-koden:

Exempel

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

Prova själv

2. Om background-size Attributet sätts till "100% 100%", kommer bakgrundsbilden att sträckas för att täcka hela innehållsområdet:

Detta är CSS-koden:

Exempel

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

Prova själv

3. Om background-size Om attributet sätts till "cover", kommer bakgrundsbilden att skalas för att täcka hela innehållsområdet.Observera att "cover"-värdet behåller förhållandet mellan bredd och höjd och kan klippa av en del av bakgrundsbilden:

Detta är CSS-koden:

Exempel

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

Prova själv

Förbered olika bilder för olika enheter

Stora bilder kan visas perfekt på stora datorskärmar, men är inte användbara på små enheter. Varför ladda en stor bild när man måste komprimera den? För att minska lasten eller av andra skäl kan du använda media queries för att visa olika bilder på olika enheter.

Detta är en stor bild och en liten bild som visas på olika enheter:

Exempel

/* För bredd mindre än 400 pixlar: */
body {
  background-image: url('img_smallflower.jpg'); 

/* För 400 pixlar eller större bredd: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

Prova själv

Du kan använda media queries min-device-width istället för min-width att kontrollera enhetens bredd, inte webbläsarens bredd. Sedan, när du justerar storleken på webbläsarfönstret, kommer bilden inte att förändras:

Exempel

/* För enheter med mindre än 400 pixlar: */
body {
  background-image: url('img_smallflower.jpg'); 

/* För enheter med 400 pixlar och större: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

Prova själv

HTML5 <picture>-elementet

HTML5 introducerade <picture> element, som gör det möjligt att definiera flera bilder.

browserstöd

38.0 13 38.0 9.1 25.0

<picture> Elementens funktion liknar <video> och <audio> Elementer. Vi har ställt in olika källor, och den första källan med prioritet är den använda källan:

Exempel

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

Prova själv

srcset Egenskapen är nödvändig, den definierar bildens källa.

media Egenskapen är valfri, den accepterar värden som kan vara CSS @media-regel hittade mediefrågor.

Tips:Du bör också ange för de som inte stöder <picture> Browsrdefinierade element <img> Element.