Jak przyciąć obraz za pomocą CSS

W tym spisie omówi:

• Metoda 1: Jak przycinać obraz za pomocą właściwości „Przepełnienie: ukryty”?
• Metoda 2: Jak przyciąć obraz za pomocą właściwości „obrazu w tle”?
• Metoda 3: Jak przycinać obraz przez właściwości „pozycja obiektowa” i „obiektowy”?

Warunek: Tworzenie pliku HTML

Aby osadzić obraz w dokumencie HTML, postępuj zgodnie z wymienionymi instrukcjami:

• Dodać "„Tag, aby utworzyć podział i przypisać mu klasę”IMG-Crop-Div". Wdrożyć „styl”Atrybut do ustawienia elementu„margines" nieruchomość.
• Następnie użyj znacznika HTML z atrybutami „SRC”, „Szerokość” i „Wysokość” do osadzania obrazu w dokumencie.
• „„src”Atrybut ustawia adres URL źródłowego.
• „„szerokość„Definiuje szerokość obrazu.
• „„wysokość”Określa wysokość obrazu.

Html

Można zauważyć, że pomyślnie dodaliśmy obraz na naszej stronie internetowej:

Metoda 1: Jak przycinać obraz za pomocą właściwości „Przepełnienie: ukryty”?

Kiedy zawartość elementu jest zbyt duża, aby zmieścić się w wyznaczonym obszarze, „„przelewowy„Własność jest zdefiniowana w celu dodania pasków przewijania. Ponadto można go również wykorzystać do przycinania dodanego obrazu.

Aby lepiej zrozumieć, stylizujmy nasz pojemnik.

Style klasa „IMG-Crop-Div”

„„.IMG-Crop-Div”Jest zdefiniowany w celu uzyskania dostępu do klasy„IMG-Crop-Div". „„wysokość" I "szerokość„Właściwości CSS są wykorzystywane do przydzielenia obszaru obrazu. Następnie pozostały obszar jest przycinany za pomocą „przelewowy„Właściwość CSS wraz z wartością”ukryty".

Wyjście

Dostosuj pozycję przyciętego obrazu

Teraz zobaczymy, jak dostosować pozycję obrazu:

Wykorzystując „margines”Własność z określonymi wartościami dla górnej, prawej, lewej i dolnej pomogły nam w dostosowaniu pozycji.

Wyjście

Metoda 2: Jak przyciąć obraz za pomocą właściwości „obrazu w tle”?

„„zdjęcie w tle„Właściwość CSS służy do określenia obrazów tła. Jednak obraz można przycinać za pomocą tej właściwości. Aby to zrobić, najpierw ustaw szerokość i wysokość zawierającego obraz. W rezultacie obraz zostanie pokazany w określonym obszarze.

Wdrożyćmy wyżej wymyślony scenariusz w CSS:

Tutaj "pozycja w tle„Właściwość jest wykorzystywana do dostosowania początkowej pozycji obrazu.

Wyjście

Jak przyciąć obraz za pomocą właściwości „dopasowania obiektu” i „pozycji obiektowej”?

CSS „obiekt-dopasowanie„Własność można łatwo określić w celu przycinania obrazów. Ma pięć wartości, ale „okładka”Jest najbardziej odpowiedni do użycia do przycinania obrazów.

W CSS dodaj następujący fragment kodu dla „IMG-Crop-Div" klasa:

Oto opis danych właściwości:

• Korzystając z „Object-Fit: Cover„Wartość właściwości, współczynnik kształtu obrazu jest utrzymywany, a jednocze.
• „„pozycja obiektowa„Nieruchomość ustawia obszar obrazu na przycinanie.

Wyjście

Zebraliśmy metody przycinania obrazu za pomocą CSS.

Wniosek

Aby przyciąć obraz w HTML, można zastosować kilka właściwości CSS. Najczęściej używane właściwości do przycinania obrazów to „przelewowy" z "szerokość" I "wysokość”,„zdjęcie w tle”,„obiekt-dopasowanie", I "pozycja obiektowa". Ten post opisał wiele metod przycinania obrazu za pomocą CSS.