Responsiivinen verkkosivun suunnittelu - Kuvat

Käytä width ominaisuutta

Jos width ominaisuuden asettamiseksi prosentteiksi ja korkeuden asettamiseksi "auto", kuva skaalautuu tarpeen mukaan suurennettavaksi tai pienennettäväksi:

Esimerkki

img {
  leveys: 100%;
  height: auto;

Kokeile itse

Huomaa, että yllä olevassa esimerkissä kuva voi suurennua yli alkuperäisen koon. Useimmissa tapauksissa parempi ratkaisu on vaihtaa max-width ominaisuus.

Käytä max-width ominaisuutta

Jos asetetaan max-width-ominaisuudeksi 100%, kuva pienenee tarpeen mukaan, mutta ei suurennu yli alkuperäisen koon:

Esimerkki

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

Kokeile itse

Lisää kuva esimerkkiin verkkosivulle

Esimerkki

img {
  leveys: 100%;
  height: auto;

Kokeile itse

Taustakuva

Taustakuva voi myös vastata muutoksiin kokoon ja skaalaan.

Tämä on kolme eri menetelmää, joita olemme esitelleet:

1. Jos asetetaan background-size Asettaessaan ominaisuudeksi "contain", taustakuva skaalautuu ja yrittää sopivia sisältöalueen kanssa. Kuva säilyttää kuitenkin pituus-leveys-suhde (kuvan leveys ja korkeus välillä):

Tämä on CSS-koodi:

Esimerkki

div {
  leveys: 100%;
  korkeus: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: ei-toistu;
  background-size: contain;
  border: 1px solmuinen punainen;

Kokeile itse

2. Jos background-size Asetettuna "100% 100%", taustakuva venytetään peittääkseen koko sisältöalueen:

Tämä on CSS-koodi:

Esimerkki

div {
  leveys: 100%;
  korkeus: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solmuinen punainen;

Kokeile itse

3. Jos background-size Asetettuna "cover", taustakuva skaalataan peittääkseen koko sisältöalueen. Huomaa, että "cover"-arvo säilyttää pituusleikkauksen ja voi leikata taustakuvan osan pois:

Tämä on CSS-koodi:

Esimerkki

div {
  leveys: 100%;
  korkeus: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solmuinen punainen;

Kokeile itse

Valmistele eri laitteille eri kuvia

Suuri kuva näyttää täydellisesti suurilla tietokoneen näytöillä, mutta ei ole hyödyllinen pienillä laitteilla. Miksi ladata suurta kuvaa, kun sitä täytyy pienentää? Voit vähentää kuormitusta tai tehdä muunlaisia syitä, ja näyttää eri kuvia eri laitteilla käyttämällä mediatutkintoja.

Tämä on suuri kuva ja pieni kuva, jotka näytetään eri laitteilla:

Esimerkki

/* Vain alle 400 pikselin leveys: */
body {
  background-image: url('img_smallflower.jpg'); 

/* Vain 400 pikseliä tai suurempi leveys: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

Kokeile itse

Voit käyttää mediatutkintoja min-device-width ei min-width tarkista laiteleveys, ei selainleveys. Kun muutat selaimen ikkunan kokoa, kuva ei muutu:

Esimerkki

/* Vain alle 400 pikselin laitteet: */
body {
  background-image: url('img_smallflower.jpg'); 

/* Vain 400 pikseliä ja suuremmat laitteet: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

Kokeile itse

HTML5 <picture> -elementin <picture> HTML5 on tuonut mukanaan

selauslaite tukee elementtiä, joka mahdollistaa useiden kuvien määrittämisen.

38.0 13 38.0 9.1 25.0

<picture> Elementin toiminta muistuttaa <video> ja <audio> Elementit. Olemme asettaneet erilaisia lähteitä, ja ensisijainen lähde, jota käytetään, on käytössä oleva lähde:

Esimerkki

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

Kokeile itse

srcset Ominaisuus on pakollinen, se määrittelee kuvan lähteen.

media Ominaisuus on valinnainen, se hyväksyy CSS @media-säännöt löytyneet media-kyselyt.

Vinkki:Sinun tulisi myös määritellä <picture> Elementin selaimen määrittely <img> Elementti.