Jak zmienić rozmiar obrazu w CSS

Podczas opracowywania strony internetowej często używamy obrazów pobranych z Internetu. Istnieje jednak szansa, że ​​pobrany obraz nie jest w odpowiednim rozmiarze. W takiej sytuacji idealnym rozwiązaniem jest rozmiar pożądanego obrazu.

Istnieją różne sposoby zmiany rozmiaru obrazu; Wybierz się na CSS, jeśli chodzi o znalezienie najszybszego i najbardziej wydajnego sposobu. CSS oferuje różne właściwości, które można wykorzystać do zmiany rozmiaru obrazów zgodnie z Twoimi preferencjami.

W tym artykule pokazano metody rozmiaru obrazów za pomocą CSS.

Jak zmienić rozmiar obrazu w CSS?

W CSS możesz użyć następujących właściwości do zmiany rozmiaru obrazu:

• właściwości wysokości i szerokości
• właściwość dopasowania obiektów
• właściwość wielkości tła

Przejdziemy przez każdą z wymienionych metod jeden po drugim!

Metoda 1: Użyj właściwości wysokości i szerokości, aby zmienić rozmiar obrazu w CSS

W CSS właściwość wysokości jest wykorzystywana do dostosowania wysokości elementów HTML. W ten sam sposób właściwość szerokości jest dość przydatna do dostosowania szerokości elementów.

Jeśli chcesz tylko zmienić „wysokość”Obraz, a następnie sprawdź następującą składnię:

Wysokość: 85%;

Tutaj, "85%”Reprezentuje wartość właściwości wysokości.

Jednak, aby zmienić obraz „szerokość”, Ustaw jego wartość zgodnie z preferencjami:

Szerokość: 85%;

Notatka: Używając "automatyczny”Ponieważ wartość właściwości wysokości i szerokości pomoże utrzymać reakcję obrazu w odniesieniu do różnych urządzeń.

Czasami jednak konieczne jest rozmiar obrazu poziomo i pionowo. W takim przypadku możesz przypisać określoną wartość do właściwości wysokości i szerokości.

Przykład

W tym przykładzie zmienimy rozmiar następującego obrazu:

Teraz, aby zmienić rozmiar podanego obrazu, ustawimy wartość właściwości wysokości jako „55%”I szerokość jako„70%”W pliku CSS:

Określ źródło obrazu „src" w "„Tag pliku HTML:

Z powodzeniem zmieniliśmy obraz za pomocą wymienionych właściwości.

Metoda 2: Użyj właściwości obiektowej, aby zmienić rozmiar obrazu w CSS

W CSS „obiekt-dopasowanie„Właściwość służy do automatycznego dostosowania obrazu do jego kontenera. Korzystając z tej właściwości, możemy sprawić, by obraz pasował do kontenera z zaciągniętymi wartościami:

• wypełnić: Jeśli obraz jest rozciągnięty w odniesieniu do pojemnika, można go zmieniać, aby pasować do pojemnika.
• zawierać: Korzystając z tej wartości właściwości, wybrany obraz utrzymuje współczynnik kształtu; Jednak jest rozmiarowy, aby pasował do pojemnika.
• okładka: Umożliwia obrazowi pokrycie całego pojemnika.
• nic: Rozmiar obrazu pozostaje taki sam.
• pomniejszyć: Gdy wartość właściwości obiektowej jest ustawiona jako skala, sprawdza, czy obraz powinien pozostać ten sam rozmiar, czy być rozmiar.

Przykład

Wykorzystamy ten sam obraz i ustawimy jego wartość obiektu jako „zawierać". W rezultacie wybrany obraz utrzyma swój współczynnik kształtu, ale jest rozmiaru zmierzenia się w tym samym pojemniku:

Obraz pomyślnie zamontowany w pojemniku. Możesz jednak użyć pokrywy, wypełnienia lub skali, aby osiągnąć pożądany wymiar obrazu:

Metoda 3: Użyj właściwości wielkości tła, aby zmienić rozmiar obrazu w CSS

Aby zmienić rozmiar obrazu tła w CSS, możesz po prostu użyć „Rozmiar tła" nieruchomość. Ta właściwość jest idealna do regulacji obrazów tła.

Przed skakaniem spójrz na opis jego różnych wartości:

• automatyczny(Wartość domyślna): Ustawiając właściwość rozmiaru tła jako „automatyczny”Obraz pozostanie w oryginalnym rozmiarze.
• okładka: Ta wartość zmusza obraz do pokrycia całego pojemnika, jeśli jest jakaś miejsce.
• zawierać: Aby upewnić się, że obraz jest w pełni widoczny, użyj „zawierać”Jako wartość właściwości w tle.

Przykład

Zastanowimy teraz „Obraz.png”, Ustawiając wartość jego właściwości w tle jako„zawierać". Ponadto, aby uniknąć powtórzenia obrazu, użyjemy „powtarzanie tła”Właściwość i ustaw wartość na„bez powtórki". Ponadto, "250px„Padding jest potrzebny, aby podsumować zawartość wewnątrz pojemnika.

Tutaj przykład jest „ID”div" pojemnik:

Następnie przypisanie „przykład”Identyfikator do i dodaj tekst za pomocą

etykietka:

TEKST

Określona wartość właściwości w tle sprawi, że obraz jest w pełni widoczny. Możesz jednak ustawić dowolną wartość zgodnie z preferencjami:

Dostarliśmy niezbędne instrukcje związane z rozmiarem obrazu w CSS.

Wniosek

Aby zmienić rozmiar obrazu za pomocą CSS, możesz użyć właściwości wysokości lub szerokości. Właściwość Fit Fit CSS może również pomóc w dopasowaniu obrazu w odniesieniu do jego kontenera. Korzystanie z właściwości obiektowej pomoże Ci w przeprowadzeniu automatycznego rozmiaru obrazu. Ponadto właściwość w tle można również wykorzystać do wspomnianego celu. W tym artykule opisano dwie wydajne metody rozmiaru obrazu w CSS.