Wyśrodkuj obraz ponadwymiarowy w Div
Próbowałem uporządkować, jak wyśrodkować ponadwymiarowy obraz w div, używając tylko css.
Używamy układu płynnego, więc szerokość kontenerów obrazów zmienia się w zależności od szerokości strony (wysokość div jest stała). Obraz znajduje się wewnątrz div, z wartością wstawionego cienia box, tak aby wyglądał, jakbyś przeglądał stronę na obrazie.
Sam obraz został tak dobrany, aby wypełnić otaczający div w jego najszerszej możliwej wartości (projekt mamax-width
wartość).
Jest to dość proste, jeśli obraz jest mniejszy niż otaczający div:
margin-left: auto;
margin-right: auto;
display: block;
Ale kiedy obraz jest większy niż div, po prostu zaczyna się od lewej krawędzi i znajduje się poza środkiem po prawej stronie (używamyoverflow: hidden
).
Możemy przypisaćwidth=100%
, ale przeglądarki wykonują kiepską pracę, zmieniając rozmiar obrazów, a projektowanie stron internetowych koncentruje się wokół wysokiej jakości obrazów.
Wszelkie pomysły na centrowanie obrazu, abyoverflow:hidden
odcina równomiernie obie krawędzie?