Πώς να δημιουργήσετε: Ανταποκρινόμενη εικόνα

Μάθετε πώς να δημιουργήσετε ανταποκρινόμενες εικόνες χρησιμοποιώντας το CSS.

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

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

Φωτα

Δείτε την επίδραση

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

Πρώτη Βήμα - Προσθέστε HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Δεύτερη Βήμα - Προσθέστε CSS:

Αν θέλετε να κάνετε την εικόνα σας να είναι ανταποκρινόμενη και να μπορεί να μεγαλώσει και να μειωθεί, ρυθμίστε το CSS width Η παράμετρος 100%,height Όρισμός auto:

Παράδειγμα

.responsive {
  width: 100%;
  height: auto;
}

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

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

Παράδειγμα

.responsive {
  max-width: 100%;
  height: auto;
}

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

Αν θέλετε να περιορίσετε την εικόνα σε μέγιστο μέγεθος, χρησιμοποιήστε max-width Παραμέτρους και τις επιλεγμένες τιμές σε pixel:

Παράδειγμα

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

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

Σελίδες σχετικές

Εκμάθηση:}}CSS εικόνα

Εκμάθηση:}}CSS Απάντηση ιστοσελίδας