Dopasowanie do obiektu - CSS-Tricks

W object-fitobiekcie definiuje, w jaki sposób reaguje element do wysokości i szerokości jego zawartości pudełka. Jest przeznaczony dla obrazów, filmów i innych osadzalnych formatów multimedialnych w połączeniu z object-positionusługą. Samo object-fitużycie pozwala nam przyciąć obraz w wierszu, dając nam precyzyjną kontrolę nad tym, jak zgniata się i rozciąga wewnątrz pudełka.

object-fit można ustawić jedną z następujących pięciu wartości:

fill: jest to wartość domyślna, która rozciąga obraz, aby dopasować go do pola treści, niezależnie od jego proporcji.
contain: zwiększa lub zmniejsza rozmiar obrazu, aby wypełnić pole, zachowując jego proporcje.
cover: obraz wypełni wysokość i szerokość swojego pudełka, ponownie zachowując proporcje, ale często przycinając obraz.
none: image zignoruje wysokość i szerokość rodzica i zachowa swój oryginalny rozmiar.
scale-down: obraz porówna różnicę pomiędzy noneiw containcelu znalezienia najmniejszego rozmiaru konkretnego obiektu.

Oto jak możemy ustawić tę właściwość:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Ponieważ drugi obraz ma współczynnik proporcji inny niż oryginalny obraz po lewej stronie, rozciągnie się on poza obszar jego pola treści, przycinając górną i dolną część obrazu.

Warto zauważyć, że domyślnie obraz jest wyśrodkowany w polu zawartości, ale można to zmienić za pomocą object-positionwłaściwości.

Próbny

Poniższe demo pokazuje pięć przykładów szczegółowo opisujących, w jaki sposób możemy chcieć, aby obraz zgniótł pole zawartości, które jest czasami mniejsze lub większe niż jego oryginalna szerokość (zmień rozmiar przeglądarki, aby lepiej zrozumieć, jak to może działać):

Zobacz dopasowanie obiektu Pen autorstwa Robina Rendle (@robinrendle) na CodePen.

Jeśli treść obrazu z jakiegokolwiek powodu nie wypełnia pola zawartości, wówczas niewypełniona przestrzeń pokaże tło elementu, w tym przypadku jasnoszare tło.

Wsparcie przeglądarki

Warto zauważyć, że iOS 8-9.3 i Safari 7-9.1 to object-fitwłaściwość, ale nie object-position.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.