Responsiva webbdesignbilder


Innehållsförteckning

    Visa innehållsförteckning

Ändra storlek på webbläsarfönstret för att se hur bilden skalas för att passa sidan.



Använda egenskapen width

Om egenskapen width är inställd på en procentsats och egenskapen height är inställd på "auto", blir bilden lyhörd och skala upp och ner:

Exempel

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

Prova själv →

<!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>


Observera att i exemplet ovan kan bilden skalas upp för att bli större än dess ursprungliga storlek. En bättre lösning kommer i många fall att vara att använda max-width egenskap istället.


Använda egenskapen max-width

Om egenskapen max-width är inställd på 100 %, skalas bilden ned om den måste, men skalas aldrig upp till större än dess originalstorlek:

Exempel

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

Prova själv →

<!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>



Lägg till en bild till exempelwebbsidan

Exempel

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

Prova själv →

<!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>




Bakgrundsbilder

Bakgrundsbilder kan också svara på storleksändring och skalning.

Här kommer vi att visa tre olika metoder:

1. Om egenskapen background-size är inställd på "contain", skalas bakgrundsbilden och försöka passa innehållsområdet. Bilden kommer dock att behålla sitt bildförhållande (det proportionella förhållandet mellan bildens bredd och höjd):


Här ä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 →

<!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. Om egenskapen background-size är inställd på "100% 100%", kommer bakgrundsbilden att sträckas ut så att den täcker hela innehållsområdet:


Här ä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 →

<!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. Om egenskapen background-size är inställd på "cover", skalas bakgrundsbilden för att täcka hela innehållsområdet. Observera att "omslags"-värdet behåller bildförhållandet, och en del av bakgrundsbilden kan vara klippt:


Här ä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 →

<!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>



Olika bilder för olika enheter

En stor bild kan vara perfekt på en stor dator skärm, men värdelös på en liten enhet. Varför ladda en stor bild när måste du skala ner det ändå? För att minska belastningen, eller av andra skäl, kan du använda mediafrågor för att visa olika bilder på olika enheter.

Här är en stor bild och en mindre bild som kommer att visas på olika enheter:

Exempel

/* 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'); 
    }
}

Prova själv →

<!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>


Du kan använda mediefrågan min-device-width istället för min-width, som kontrollerar enhetens bredd istället för webbläsarens bredd. Då ändras inte bilden när du ändrar storlek på webbläsarfönstret:

Exempel

/* 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'); 
  }
}

Prova själv →

<!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-elementet

HTML-elementet ><picture> ger webb utvecklare mer flexibilitet när det gäller att specificera bildresurser.

Den vanligaste användningen av element kommer att vara för bilder som används i responsiv design. Istället för att ha en bild som skalas upp eller ned baserat på visningsportens bredd, kan flera bilder utformas för att bättre fylla webbläsarens vyport.

Elementet <picture> fungerar på samma sätt som och <audio>-element. Du ställer in olika källor, och den första källan som passar till preferenser är den som används:

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 →

<!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>


Attributet srcset krävs och definierar bildens källa.

Attributet media är valfritt och accepterar de mediefrågor du hittar i CSS @media regel.

Du bör också definiera ett <img>-element för webbläsare som inte stöder element.