CSS Force Rize Zmianuj rozmiar i zachowaj współczynnik kształtu

Podczas projektowania stron internetowych, programiści zawsze szukają sposobów dostosowania strony internetowej, aby obrazy lub inne komponenty były idealnie wyświetlane w każdym rozmiarze ekranu. Mówiąc dokładniej, arkusz stylów kaskadowych lub CSS pomaga właściwy wygląd stron internetowych. Zapewnia właściwości i właściwości stylizacji, które pomagają utrzymać układ, rozmiar i proporcje obrazów.

Ten zapis pokaże trzy następujące trzy metody:

• Metoda 1: Wymuś rozmiar obrazu i zachowaj współczynnik kształtu za pomocą „szerokość" I "wysokość”Właściwości CSS
• Metoda 2: Wymień rozmiar obrazu i zachowaj współczynnik kształtu za pomocą „obiekt-dopasowanie„Własność CSS
• Metoda 3: Wymuś rozmiar obrazu i zachowaj współczynnik kształtu za pomocą „Wyświetlacz: Flex„Własność CSS

Warunek: Dodaj obraz do pliku HTML

Wcześniej idź naprzód, określ „”Element w pliku HTML do dodania obrazu do dokumentu:

Metoda 1: Wymień rozmiar obrazu i zachowaj współczynnik kształtu za pomocą właściwości CSS „szerokości” i „wysokości”

„„szerokość" I "wysokość„Właściwości można wykorzystać do dostosowania obrazu. Ponadto właściwość szerokości o określonej wartości i właściwości wysokości z automatyczną lub odwrotnie może pomóc w zmianie rozmiaru obrazu i utrzymaniu współczynnika kształtu.

Element stylu „IMG”

„„”Element jest określony z następującymi właściwościami:

img
szerokość: 400px;
Wysokość: auto;

Tutaj:

• "szerokość”Określa szerokość obrazu.
• "wysokość”Ustawia wysokość obrazu.

Wyjście

Ustawmy teraz szerokość jako automatyczne i zobaczmy wyniki.

W CSS ustaw „wysokość„Własność o pewnej wartości i„szerokość" Jak "automatyczny”:

Wysokość: 400px;
szerokość: auto;

Dane wyjście oznacza, że ​​obraz został zmieniony, a współczynnik kształtu jest również utrzymywany:

Metoda 2: Wymień rozmiar obrazu i zachowaj współczynnik kształtu za pomocą właściwości CSS „Fit-Fit”

CSS „obiekt-dopasowanie„Własność o wartości”zawierać”Można wykorzystać do dostosowania obrazu bez wpływu na jego proporcje.

Aby to zrobić, zastosuj następujące właściwości CSS do dodanego HTML ”" Element:

szerokość: 400px;
Wysokość: 400px;
Object-fit: zawiera;

„„obiekt-dopasowanie„Własność o wartości”zawierać”Określa, w jaki sposób należy zmienić rozmiar obrazu lub wideo, aby zmieścić się w pojemniku.

Wyjście

Metoda 3: Wymień rozmiar obrazu i zachowaj współczynnik kształtu za pomocą właściwości CSS „Display: Flex” CSS

„„wyświetlacz„Własność o wartości”przewód”Umieszcza elementy elastycznego pojemnika z rzędu (domyślnie).

Przykład

Po pierwsze, dodaj „”Z klasą„główny". Następnie:

• Dodaj dwa obrazy za pomocą tagów „”.
• „„src”I„ „Alt„Atrybuty są wymienione dla adresu URL obrazu i alternatywnego tekstu obrazu, jeśli w każdym razie obraz nie mógł wyświetlić:

Stylowa klasa „główna”

„„.główny”Służy do dostępu do elementu„ ”o określonej nazwie klasy. Zastosowane są do niego następujące właściwości:

.główny
Wyświetlacz: Flex;
szerokość: 100%;

Tutaj:

• "wyświetlacz„Własność o wartości”przewód„Umieszcza obrazy z rzędu.
• "szerokość”Oczywiście określa szerokość elastycznego pojemnika.

Styl „IMG” elementu klasy „głównej”

.Main IMG
Szerokość: 50%;
Wysokość: auto;

„„img„Element zawiera„50%”Szerokość i„wysokość”Jest ustawiony jako„automatyczny”I automatycznie dostosowuje wysokość kontenera.

Wyjście

Nauczyłeś się, jak zmusić obrazy do zmiany rozmiaru i utrzymania proporcji w CSS.

Wniosek

Istnieją alternatywne sposoby rozmiaru obrazu i utrzymania jego proporcji w CSS, takich jak ustalenie określonej wartości „szerokość„Własność i„ „automatyczny„Wartość dla„wysokość„Własność obrazu lub odwrotnie. CSS „obiekt-dopasowanie„Własność o wartości”zawierać”To najlepsza metoda. Co więcej, „Wyświetlacz: Flex„Własność można również wykorzystać do utrzymania proporcji obrazu. Ten zapis wyjaśnił metody wykazania, jak zmienić rozmiar obrazu i utrzymać jego proporcje w CSS.