CSS Force Immagine Ridimensiona e mantieni le proporzioni

Durante la progettazione di siti Web, gli sviluppatori sono sempre alla ricerca di modi per regolare la pagina Web in modo che le immagini o altri componenti vengano visualizzati perfettamente in ogni dimensione dello schermo. Più specificamente, il foglio di stile a cascata o CSS aiuta a fare un aspetto corretto per le pagine Web. Fornisce proprietà e proprietà di stile che aiutano a mantenere il layout, le dimensioni e le proporzioni delle immagini.

Questo articolo dimostrerà tre seguenti tre metodi:

• Metodo 1: forzare l'immagine ridimensionare e mantenere le proporzioni utilizzate "larghezza" E "altezza"Proprietà CSS
• Metodo 2: forzare l'immagine ridimensionare e mantenere le proporzioni utilizzate "Object-Fit"Proprietà CSS
• Metodo 3: forzare l'immagine ridimensionare e mantenere le proporzioni utilizzate "Visualizza: Flex"Proprietà CSS

Prerequisito: aggiungi l'immagine al file HTML

Prima, andando avanti, specifica il ""Elemento nel file HTML per l'aggiunta di un'immagine al documento:

Metodo 1: forzare l'immagine ridimensionamento e mantenere le proporzioni delle proporzioni usando le proprietà CSS "larghezza" e "altezza"

IL "larghezza" E "altezza"Le proprietà possono essere utilizzate per regolare l'immagine. Inoltre, la proprietà di larghezza con un valore specificato e la proprietà di altezza con auto o viceversa potrebbe aiutare a ridimensionare l'immagine e mantenere il rapporto Aspetto.

Elemento "img" di stile

IL ""L'elemento è specificato con le seguenti proprietà:

img
larghezza: 400px;
Altezza: auto;

Qui:

• "larghezza"Determina la larghezza dell'immagine.
• "altezza"Imposta l'altezza dell'immagine.

Produzione

Ora impostiamo la larghezza come auto e vediamo i risultati.

In CSS, imposta il "altezza"Proprietà con un certo valore e"larghezza" COME "auto":

Altezza: 400px;
larghezza: auto;

L'output fornito significa che l'immagine è stata ridimensionata e che anche il rapporto è mantenuto:

Metodo 2: forzare l'immagine ridimensionare e mantenere le proporzioni utilizzando la proprietà CSS "FIT Object"

Il CSS "Object-Fit"Proprietà con il valore"contenere"Può essere utilizzato per regolare l'immagine senza influire sul suo proporzione.

Per fare ciò, applica le seguenti proprietà CSS su HTML aggiunto ""Elemento:

larghezza: 400px;
Altezza: 400px;
Object-Fit: contenere;

IL "Object-Fit"Proprietà con il valore"contenere"Specifica il modo in cui un'immagine o un video dovrebbe essere ridimensionato per adattarsi al suo contenitore.

Produzione

Metodo 3: forzare l'immagine ridimensionare e mantenere le proporzioni utilizzando la proprietà CSS "Display: Flex"

IL "Schermo"Proprietà con il valore"flettere"Posiziona gli articoli del contenitore flessibile in una riga (per impostazione predefinita).

Esempio

In primo luogo, aggiungi un ""Con la classe"principale". Poi:

• Aggiungi due immagini utilizzando i tag "".
• IL "src" e il "Al"Gli attributi sono menzionati per l'URL dell'immagine e il testo alternativo dell'immagine se in ogni caso l'immagine non è possibile visualizzare:

Classe "principale" di stile

IL ".principale"Viene utilizzato per accedere all'elemento" "con il nome della classe specificato. Le seguenti proprietà sono applicate ad esso:

.principale
display: flex;
larghezza: 100%;

Qui:

• "Schermo"Proprietà con il valore"flettere"Posiziona le immagini di fila.
• "larghezza"La proprietà determina la larghezza del contenitore flessibile.

Stile Elemento "IMG" della classe "principale"

.IMG principale
larghezza: 50%;
Altezza: auto;

IL "img"L'elemento contiene il"50%"Larghezza e il"altezza"È impostato come"auto"E regola automaticamente l'altezza del contenitore.

Produzione

Hai imparato come forzare le immagini a ridimensionare e mantenere le proporzioni in CSS.

Conclusione

Esistono modi alternativi per ridimensionare l'immagine e mantenere il suo rapporto di aspetto in CSS, come impostare un valore specifico di "larghezza"Proprietà e"auto"Valore per il"altezza"Proprietà dell'immagine o viceversa. Il CSS "Object-Fit"Proprietà con il valore"contenere"È il metodo migliore. Inoltre, il "Visualizza: Flex"La proprietà può anche essere utilizzata per mantenere le proporzioni dell'immagine. Questo articolo ha spiegato i metodi per dimostrare come ridimensionare un'immagine e mantenere il suo proporzione in CSS.