Czasami wymagane jest dopasowanie obrazu do określonego wymiaru. Możemy zmienić rozmiar obrazu, określając szerokość i wysokość obrazu. Typowym rozwiązaniem jest użycie maksymalna szerokość: 100%; I wysokość: automatyczna; tak, aby duże obrazy nie przekraczały szerokości pojemnika. The maksymalna szerokość I maksymalna wysokość właściwości CSS działają lepiej, ale nie są obsługiwane w wielu przeglądarkach.
Innym sposobem zmiany rozmiaru obrazu jest użycie dopasowanie obiektowe właściwość, która pasuje do obrazu. Ta właściwość CSS określa, w jaki sposób rozmiar wideo lub obrazu jest zmieniany, aby dopasować go do pola zawartości. Określa, w jaki sposób element mieści się w kontenerze o ustalonej szerokości i wysokości.
The dopasowanie obiektowe właściwość jest zwykle stosowana do obrazu lub wideo. Ta właściwość określa, w jaki sposób element reaguje na szerokość i wysokość swojego kontenera. Głównie istnieje pięć wartości dopasowanie obiektowe własność taka jak wypełnić, zawierać, przykryć, brak, pomniejszyć, początkowe , I dziedziczyć . Domyślna wartość tej właściwości to 'wypełnić' .
Przykład
W tym przykładzie zmieniamy rozmiar obrazu za pomocą opcji maksymalna szerokość: 100%; I wysokość: automatyczna; nieruchomości.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Przetestuj teraz Wyjście
Przykład
W tym przykładzie używamy dopasowanie obiektowe: pokrywa; nieruchomość.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Przetestuj teraz Wyjście
W powyższym przykładzie użyliśmy metody okładka wartość dopasowanie obiektowe nieruchomość. Podobnie jak w powyższym przykładzie, możemy użyć innych wartości funkcji dopasowanie obiektowe właściwość, aby zmienić rozmiar obrazu.