Ändra storlek på webbläsarfönstret för att se hur bilden skalas för att passa sidan.
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:
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.
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:
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>
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 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:
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:
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:
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>
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:
/* 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:
/* 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 ><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:
<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.