W HTML/CSS użytkownik może dodać obraz, filmy lub linki do strony internetowej. Czasami jednak użytkownicy mają trudności z zmianą zmiany obrazu lub dostosowania rozmiaru obrazu bez rozciągania. W tym celu CSS zezwala użytkownikom na korzystanie z różnych nieruchomości, takich jak „obiekt-dopasowanie„Własność CSS. Ta właściwość może wypełnić rozmiar obrazu bez rozciągania.

Ten post wyjaśni:

• Jak dodać obraz w HTML?
• Jak wypełnić rozmiar obrazu CSS bez rozciągania?

Jak wstawić obraz w HTML?

Obrazy na stronie HTML można dołączyć na wiele sposobów. Jednakże "”Tag jest jednym z głównie wykorzystywanych elementów do osadzania obrazów.

Jeśli użytkownik pragnie dodania obrazu do strony HTML, spójrz na podane instrukcje.

Krok 1: Dodaj nagłówek

Najpierw dodaj nagłówek za pomocą „

”Tag. Następnie dodaj tekst między określonym znacznikiem nagłówka.

Krok 2: Dodaj obraz

Następnie wstaw „„”Tag wraz z następującymi atrybutami:

• „„klasa„Atrybut służy do dostępu do elementu według nazwy klasy.
• „„src„Atrybut jest wykorzystywany do dodawania ścieżki obrazu lub adresu URL.
• "szerokość”Określa rozmiar obrazu w poziomie.
• "wysokość„Przydziela wysokość obrazu:

Dodaj obraz

Wyjście pokazuje, że obraz został pomyślnie dodany:

Jak wypełnić rozmiar obrazu CSS bez rozciągania?

Aby wypełnić rozmiar obrazu CSS bez rozciągania, wypróbuj podane instrukcje.

Najpierw uzyskaj dostęp do „„Element za pomocą„.okładka”I zastosuj następujące właściwości CSS:

.okładka
Object-Fit: Cover;
szerokość: 50px;
Margines: 20px;
Wysokość: 100px;

Opis wyżej wymienionego kodu jest następujący:

• „„obiekt-dopasowanie„Właściwość jest wykorzystywana do określenia, w jaki sposób obraz powinien być rozmiaru, aby pasował do kontenera. Na przykład ustaliliśmy jego wartość jako „okładka".
• "szerokość”Określa rozmiar szerokości obrazu.
• "margines„Przydziela przestrzeń wokół granicy elementu.
• "wysokość”Definiuje wysokość obrazu w pojemniku.

Można zauważyć, że obraz został zmieniony i wypełniony bez rozciągania:

Chodziło o wypełnienie obrazu bez rozciągania.

Wniosek

Aby wypełnić rozmiar obrazu bez rozciągania, najpierw dodaj obraz za pomocą „”Tag wraz z atrybutem klasy. Następnie uzyskaj dostęp do obrazu za pomocą nazwy klasy i zastosuj „obiekt-dopasowanie„Nieruchomość CSS jako„okładka". Ponadto zastosuj inne właściwości CSS do stylizacji, takie jak „szerokość”,„wysokość", I "margines". Ten post wykazał metodę rozmiaru i wypełniania obrazu bez rozciągania.