CSS Zmiana zmiany zmiany rozmiaru/powiększanie na obraz przy jednoczesnym zachowaniu wymiarów

Obrazy są najważniejszą i kluczową częścią tworzenia stron internetowych. Czasami twórcy stron internetowych dodają różne efekty na obrazach, aby strona internetowa była bardziej atrakcyjna, w tym wrzucanie obrazów, powiększenie, powiększenie efektów i tak dalej. Mówiąc dokładniej, w procesie powiększenia obraz staje się większy zgodnie z wymaganiami. W przeglądarce obrazu proces powiększenia jest bardzo ważny. Aby uzyskać ten proces, użytkownicy mogą korzystać z „skala()" I "Tłumaczyć()”Metody.

Ten zapis zostanie zbadany:

• Jak wstawić obraz w HTML?
• Jak zmienić zmianę/powiększanie efektu na obraz, zachowując wymiary w CSS?

Jak wstawić obraz w HTML?

Aby dodać obraz w HTML, użytkownicy muszą wykonać te podane kroki.

Krok 1: Utwórz pojemnik „Div”

Najpierw skorzystaj z „div„Element do utworzenia pojemnika„ Div ”. Następnie wstaw atrybut klasy i określ konkretną nazwę

Krok 2: Dodaj obraz

Następnie dodaj obraz za pomocą „”Tag. Wewnątrz znacznika IMG podaj następujące atrybuty:

• "src„Atrybut służy do dodania pliku multimedialnego.
• "Alt”Jest wykorzystywany do wyświetlania tekstu na obrazie, gdy obraz nie jest wyświetlany z jakiegoś powodu:

Można zauważyć, że obraz został pomyślnie dodany:

Jak zmienić zmianę/powiększanie efektu na obraz, zachowując wymiary w CSS?

Aby zmienić zmianę/powiększanie obrazu na obraz przy zachowaniu wymiarów, dostęp do obrazu za pomocą „:unosić się„Efekt i zastosuj”przekształcać”Z wartością„skala (2.0)"

Wypróbuj podane wspomniane poniżej instrukcje, aby to zrobić.

Krok 1: Styl kontener „Div”

Uzyskaj dostęp do kontenera „Div” za pomocą nazwy klasy „.IMG-CONTENT”I zastosuj poniższe wymienione właściwości CSS:

.IMG-content
Wyświetlacz: Block Inline;
przepełnienie: inicjał;
Margines: 20px 100px;
Wyściółka: 40px;
szerokość: 300px;
Wysokość: 300px;
kolor tła: RGB (233, 146, 16);

Tutaj:

• "wyświetlacz„Właściwość jest wykorzystywana do ustawiania wyświetlacza dla obrazu. Aby to zrobić, wartość tej właściwości jest ustalana jako „Block wbudowany".
• "przelewowy”Kontroluje zawartość, która jest długa do dopasowania w obszarze.
• "margines”Definiuje przestrzeń po najbardziej zewnętrznej stronie granicy elementu.
• "wyściółka”Służy do przydzielania przestrzeni wewnątrz zdefiniowanego obszaru.
• "szerokość”Jest wykorzystywany do ustawiania szerokości elementu.
• "wysokość”Własność przydziela konkretną wysokość elementu.
• "kolor tła”Określa kolor tylnej części elementu.

Wyjście

Krok 2: Zastosuj najem

Dostęp do obrazu z efektem zawisowym jako „IMG: Włóż”:

IMG: Hover
Transform: Skala (2.0);

Następnie zastosuj „przekształcać„Właściwość, która jest wykorzystywana do ustawiania transformacji 2D lub 3D dla elementu. W tym celu wartość tej właściwości jest ustalana jako skala (2.0). Mówiąc dokładniej, „skala()”Funkcja CSS jest używana do definiowania transformacji, która jest wykorzystywana do zmiany rozmiaru elementu na płaszczyźnie 2D.

Wyjście

Chodzi o ten post dotyczący efektu powiększenia na obraz, zachowując wymiary.

Wniosek

Aby zmienić zmianę/powiększanie na obraz, najpierw wstaw obraz na stronie HTML, a następnie zastosuj właściwości CSS, w tym „wyświetlacz„Aby ustawić wyświetlanie elementu i„przelewowy”, Który jest wykorzystywany do kontrolowania treści, która jest zbyt duża, aby zmieścić się w obszarze. Następnie dostęp do obrazu za pomocą „:unosić się”Wpływ i zastosuj właściwość transformacji o wartość”skala (2.0)”W celu zmiany rozmiaru elementu na płaszczyźnie 2D. Ten post wyjaśnił metodę zmiany rozmiaru/powiększenia na obraz, zachowując wymiar.