Responsiiviset Web Design -kuvat

Sisällysluettelo

Muuta selainikkunan kokoa nähdäksesi kuinka kuva skaalautuu sivulle sopivaksi.

`width`-ominaisuuden käyttäminen

Jos width-ominaisuuden arvo on prosentti ja korkeus-ominaisuuden arvoksi on asetettu "auto", kuva on reagoiva ja skaalata ylös ja alas:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale.</p>

</body>
</html>

Huomaa, että yllä olevassa esimerkissä kuvaa voidaan skaalata suuremmaksi kuin alkuperäinen koko. Monissa tapauksissa parempi ratkaisu on käyttää max-width -ominaisuuden sijaan.

`max-width`-ominaisuuden käyttäminen

Jos max-width-ominaisuuden arvoksi on asetettu 100 %, kuva pienennetään tarvittaessa, mutta se ei koskaan skaalaa sitä suuremmiksi. alkuperäinen koko:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="img_chania.jpg" width="460" height="345">
<p>Resize the browser window to see how the image will scale when the width is less than 460px.</p>

</body>
</html>

Lisää kuva esimerkkiverkkosivulle

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

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

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <img src="img_chania.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Taustakuvat

Taustakuvat voivat myös reagoida koon muuttamiseen ja skaalaukseen.

Tässä näytämme kolme erilaista menetelmää:

1. Jos background-size-ominaisuuden arvoksi on asetettu "contain", taustakuva skaalautuu ja yrittää sovittaa sisältöalueeseen. Kuva säilyttää kuitenkin kuvasuhteensa (suhteellinen suhde kuvan leveyden ja korkeuden välillä):

Tässä on CSS-koodi:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

2. Jos background-size-ominaisuuden arvoksi on asetettu "100% 100%, taustakuva venyy kattamaan koko sisältöalueen:

Tässä on CSS-koodi:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

3. Jos background-size-ominaisuuden arvoksi on asetettu "cover", taustakuva skaalautuu kattamaan koko sisältöalueen. Huomaa, että "cover"-arvo säilyttää kuvasuhteen ja osa taustakuvasta saatetaan leikata:

Tässä on CSS-koodi:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}
</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div></div>

</body>
</html>

Erilaisia kuvia eri laitteille

Suuri kuva voi olla täydellinen suurella tietokoneella näyttö, mutta hyödytön pienessä laitteessa. Miksi ladata suuri kuva, kun pitääkö sitä kuitenkin pienentää? Voit vähentää kuormitusta tai muista syistä mediakyselyjen avulla näyttääksesi erilaisia kuvia eri laitteissa.

Tässä on yksi iso kuva ja yksi pienempi kuva, jotka näytetään eri laitteilla:

Esimerkki

/* For width smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For width 400px and larger: */
@media only screen and (min-width: 400px) 
{
  body { 
    background-image: url('img_flowers.jpg'); 
    }
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

<p style="margin-top:360px;">Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

Voit käyttää mediakyselyä min-device-width kyselyn min-width sijaan, mikä tarkistaa laitteen leveyden selaimen leveyden sijaan. Tällöin kuva ei muutu, kun muutat selainikkunan kokoa:

Esimerkki

/* For devices smaller than 400px: */
body {
  background-image: 
url('img_smallflower.jpg'); 
}
/* 
For devices 400px and larger: */
@media only screen and (min-device-width: 400px) 
{
  body { 
    
background-image: url('img_flowers.jpg'); 
  }
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For device width smaller than 400px: */
body {
  background-repeat: no-repeat;
  background-image: url('img_smallflower.jpg'); 
}

/* For device width 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body { 
     background-image: url('img_flowers.jpg'); 
  }
}
</style>
</head>
<body>

</body>
</html>

HTML -elementti

HTML-elementti <picture> antaa webin kehittäjille enemmän joustavuutta kuvaresurssien määrittämisessä.

<picture>:n yleisin käyttö elementti on tarkoitettu kuville, joita käytetään responsiivisissa malleissa. Sen sijaan, että olisi sellainen kuva on skaalattu ylös- tai alaspäin näkymän leveyden perusteella, useita kuvia voidaan tehdä on suunniteltu täyttämään selaimen näkymä kauniimmin.

<picture>-elementti toimii samalla tavalla kuin <video> ja <audio>-elementtejä. Määrität eri lähteitä ja ensimmäisen lähteen, joka sopii asetuksia käytetään:

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 →

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

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

<p>Resize the browser width and the background image will change at 400px.</p>

</body>
</html>

Attribuutti srcset on pakollinen, ja se määrittää kuvan lähteen.

Attribuutti media on valinnainen ja hyväksyy mediakyselyt, jotka löydät CSS @mediasääntö.

Sinun tulee myös määrittää <img>-elementti selaimille, jotka eivät tue <picture>-elementti.

Responsiiviset Web Design -kuvat

Sisällysluettelo

width-ominaisuuden käyttäminen

Esimerkki

max-width-ominaisuuden käyttäminen

Esimerkki

Lisää kuva esimerkkiverkkosivulle

Esimerkki

Taustakuvat

Esimerkki

Esimerkki

Esimerkki

Erilaisia kuvia eri laitteille

Esimerkki

Esimerkki

HTML -elementti

Esimerkki

`width`-ominaisuuden käyttäminen

`max-width`-ominaisuuden käyttäminen