Διαδραστικός Σχεδιασμός Ιστοσελίδας - Εικόνες

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

Αν width ιδιότητες σε ποσοστό και η ύψος σε "auto", η εικόνα θα προσαρμόζεται για να μεγαλώνει ή να συρρικνώνεται:

Παράδειγμα

img {
  width: 100%;
  height: auto;

Δοκιμάστε το προσωπικά

Λάβετε υπόψη ότι στην παραπάνω παράδειγμα, η εικόνα μπορεί να μεγαλώσει πάνω από το αρχικό της μέγεθος. Στην πλειοψηφία των περιπτώσεων, μια καλύτερη λύση είναι να χρησιμοποιήσετε max-width ιδιότητες.

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

Αν ρυθμίσεις την ιδιότητα max-width σε 100%，η εικόνα θα συρρικνώνεται ανάλογα αλλά δεν θα μεγαλώνει πάνω από το αρχικό της μέγεθος:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

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

Παράδειγμα

img {
  width: 100%;
  height: auto;

Δοκιμάστε το προσωπικά

Η εικόνα του φόντου

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

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

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

This is the CSS code:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

2. If background-size If the property is set to "100% 100%", the background image will stretch to cover the entire content area:

This is the CSS code:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

3. If background-size If the property is set to "cover", the background image will scale to cover the entire content area. Note that the "cover" value maintains the aspect ratio and may crop a part of the background image:

This is the CSS code:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Prepare different images for different devices

The large image can be displayed perfectly on a large computer screen, but it is not useful on small devices. Why load a large image when you have to shrink it? To reduce load or for any other reason, you can use media queries to display different images on different devices.

This is a large image and a small image, which will be displayed on different devices:

Παράδειγμα

/* For widths less than 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 

/* For widths of 400 pixels or larger: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg');

Δοκιμάστε το προσωπικά

You can use media queries min-device-width instead of min-width to check the device width instead of the browser width. Then, when you adjust the size of the browser window, the image will not change:

Παράδειγμα

/* For devices with less than 400 pixels: */
body {
  background-image: url('img_smallflower.jpg'); 

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

Δοκιμάστε το προσωπικά

HTML5 <picture> element

HTML5 introduced <picture> element, which allows you to define multiple images.

Browser support

38.0 13 38.0 9.1 25.0

<picture> The function of the element is similar to <video> and <audio> Element. We set different sources, and the first source with matching priority is the source currently in use:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

srcset Η ιδιότητα είναι υποχρεωτική και ορίζει

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

Συμβουλή:Πρέπει επίσης να υποστηρίξετε <picture> Ορισμός του στοιχείου από τον περιηγητή <img> Στοιχείο.