Responsive Web Design Images

Πίνακας περιεχομένων

Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να δείτε πώς κλιμακώνεται η εικόνα ώστε να ταιριάζει στη σελίδα.

Χρήση της ιδιότητας `width`

Εάν η ιδιότητα width έχει οριστεί σε ποσοστό και η ιδιότητα height έχει οριστεί σε "auto", η εικόνα θα είναι ανταποκρίνεται και κλιμακώνεται προς τα πάνω και προς τα κάτω:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Παρατηρήστε ότι στο παραπάνω παράδειγμα, η εικόνα μπορεί να κλιμακωθεί ώστε να είναι μεγαλύτερη από το αρχικό του μέγεθος. Μια καλύτερη λύση, σε πολλές περιπτώσεις, θα είναι η χρήση του Αντ' αυτού, η ιδιότητα max-width.

Χρήση της ιδιότητας `max-width`

Εάν η ιδιότητα max-width έχει οριστεί στο 100%, η εικόνα θα μειωθεί εάν χρειάζεται, αλλά ποτέ δεν θα γίνει μεγαλύτερη από αυτήν αυθεντικό μέγεθος:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Δοκιμάστε το μόνοι σας →

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

Εικόνες φόντου

Οι εικόνες φόντου μπορούν επίσης να ανταποκριθούν στην αλλαγή μεγέθους και την κλιμάκωση.

Εδώ θα δείξουμε τρεις διαφορετικές μεθόδους:

1. Εάν η ιδιότητα background-size έχει οριστεί σε "contain", η εικόνα φόντου θα κλιμακωθεί και θα προσπαθήσει να χωρέσει στην περιοχή περιεχομένου. Ωστόσο, η εικόνα θα διατηρήσει τον λόγο διαστάσεων της (η αναλογική σχέση μεταξύ του πλάτους και του ύψους της εικόνας):

Εδώ είναι ο κώδικας CSS:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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. Εάν η ιδιότητα background-size έχει οριστεί σε "100% 100%", η εικόνα φόντου θα επεκταθεί για να καλύψει ολόκληρη την περιοχή περιεχομένου:

Εδώ είναι ο κώδικας CSS:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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. Εάν η ιδιότητα background-size έχει οριστεί σε "cover", η εικόνα φόντου θα κλιμακωθεί ώστε να καλύπτει ολόκληρη την περιοχή περιεχομένου. Σημειώστε ότι η τιμή "cover" διατηρεί την αναλογία διαστάσεων και κάποιο μέρος της εικόνας φόντου μπορεί να αποκοπεί:

Εδώ είναι ο κώδικας CSS:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Διαφορετικές εικόνες για διαφορετικές συσκευές

Μια μεγάλη εικόνα μπορεί να είναι τέλεια σε έναν μεγάλο υπολογιστή οθόνη, αλλά άχρηστο σε μια μικρή συσκευή. Γιατί να φορτώσετε μια μεγάλη εικόνα όταν πρέπει να το μειώσεις πάντως; Για να μειώσετε το φορτίο ή για οποιονδήποτε άλλο λόγο, μπορείτε να χρησιμοποιήσετε ερωτήματα πολυμέσων για να εμφανίσετε διαφορετικές εικόνες σε διαφορετικές συσκευές.

Ακολουθεί μία μεγάλη εικόνα και μία μικρότερη εικόνα που θα εμφανίζονται σε διαφορετικές συσκευές:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Μπορείτε να χρησιμοποιήσετε το ερώτημα πολυμέσων min-device-width, αντί για min-width, το οποίο ελέγχει το πλάτος της συσκευής, αντί για το πλάτος του προγράμματος περιήγησης. Στη συνέχεια, η εικόνα δεν θα αλλάξει όταν αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Το στοιχείο HTML <picture> δίνει web Προγραμματιστές μεγαλύτερη ευελιξία στον καθορισμό πόρων εικόνας.

Η πιο κοινή χρήση του <picture> Το στοιχείο θα είναι για εικόνες που χρησιμοποιούνται σε αποκριτικά σχέδια. Αντί να έχει ένα εικόνα που κλιμακώνεται προς τα πάνω ή προς τα κάτω με βάση το πλάτος της θύρας προβολής, πολλές εικόνες μπορούν έχει σχεδιαστεί για να γεμίζει πιο όμορφα τη θύρα προβολής του προγράμματος περιήγησης.

Το στοιχείο <picture> λειτουργεί παρόμοια με το <video> και στοιχεία <audio>. Ρυθμίζετε διαφορετικές πηγές και την πρώτη πηγή που ταιριάζει προτιμήσεις είναι αυτή που χρησιμοποιείται:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Το χαρακτηριστικό srcset απαιτείται και ορίζει την πηγή της εικόνας.

Το χαρακτηριστικό μέσα είναι προαιρετικό και αποδέχεται τα ερωτήματα πολυμέσων που βρίσκετε στο Κανόνας CSS @media.

Θα πρέπει επίσης να ορίσετε ένα στοιχείο <img> για προγράμματα περιήγησης που δεν υποστηρίζουν στοιχείο <picture>.

Responsive Web Design Images

Πίνακας περιεχομένων

Χρήση της ιδιότητας width

Παράδειγμα

Χρήση της ιδιότητας max-width

Παράδειγμα

Προσθέστε μια εικόνα στην ιστοσελίδα του παραδείγματος

Παράδειγμα

Εικόνες φόντου

Παράδειγμα

Παράδειγμα

Παράδειγμα

Διαφορετικές εικόνες για διαφορετικές συσκευές

Παράδειγμα

Παράδειγμα

Το στοιχείο HTML <picture>

Παράδειγμα

Χρήση της ιδιότητας `width`

Χρήση της ιδιότητας `max-width`