Znalazłem ten wątek - Jak rozciągnąć obraz, aby wypełnić <div>, zachowując jednocześnie jego proporcje? - nie do końca tego chcę.
Mam element div o określonym rozmiarze i znajdujący się w nim obraz. Chcę zawsze wypełniać element div obrazem, niezależnie od tego, czy obraz jest poziomy czy pionowy. I nie ma znaczenia, czy obraz jest obcięty (sam element div ma ukryty przepełnienie).
Więc jeśli obraz jest portretem, chcę, width
żeby był 100%
i height:auto
żeby pozostał proporcjonalny. Jeśli obraz jest poziomy, chcę height
być 100%
i width to be
auto`. Brzmi skomplikowanie, prawda?
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Ponieważ nie wiem, jak to zrobić, po prostu stworzyłem szybki obraz tego, co mam na myśli. Nie potrafię tego właściwie opisać.
Więc chyba nie ja pierwszy o to pytam. Jednak nie mogłem znaleźć rozwiązania tego problemu. Może jest na to jakiś nowy sposób CSS3 - myślę o flex-boxie. Dowolny pomysł? Może to nawet łatwiejsze niż się spodziewam?
źródło
Odpowiedzi:
Jeśli dobrze rozumiem, czego chcesz, możesz pozostawić atrybuty szerokości i wysokości poza obrazem, aby zachować proporcje i użyć Flexbox, aby wyśrodkować za Ciebie.
JSFiddle tutaj
Testowałem to pomyślnie w IE9, Chrome 31 i Opera 18. Ale żadna inna przeglądarka nie została przetestowana. Jak zawsze musisz wziąć pod uwagę swoje szczególne wymagania dotyczące wsparcia.
źródło
.fill img { min-height:100%; min-width: 100%; object-fit: cover; }
Jest trochę za późno, ale właśnie miałem ten sam problem i ostatecznie rozwiązałem go za pomocą innego postu stackoverflow ( https://stackoverflow.com/a/29103071 ).
Mam nadzieję, że to nadal komuś pomoże.
Ps: działa również razem z właściwościami css max-height , max-width , min-width i min-height . Jest to szczególnie przydatne przy użyciu jednostek długości, takich jak 100% lub 100 vh / 100 vw, do wypełnienia kontenera lub całego okna przeglądarki.
źródło
object-position
reguły do tej klasy będzie tutaj pomocne. Tylko uwaga na marginesie.Stare pytanie, ale zasługuje na aktualizację, ponieważ teraz jest na to sposób.
Poprawną odpowiedzią opartą na CSS jest użycie
object-fit: cover
, które działa jakbackground-size: cover
. Pozycjonowaniem zajmie sięobject-position
atrybut, który domyślnie jest centrowaniem.Ale nie ma dla niego wsparcia w żadnej przeglądarce IE / Edge lub Android <4.4.4. Nie
object-position
jest również obsługiwany przez Safari, iOS ani OSX. Polyfills istnieją, obrazy dopasowania obiektów wydają się dawać najlepsze wsparcie.Aby uzyskać więcej informacji na temat działania tej właściwości, zobacz artykuł o Sztukach CSS, który zawiera
object-fit
wyjaśnienia i prezentację.źródło
To powinno wystarczyć:
źródło
Wszystkie poniższe odpowiedzi mają stałą szerokość i wysokość, co powoduje, że rozwiązanie „nie reaguje”.
Aby osiągnąć wynik, ale zachować responsywność obrazu, użyłem następujących:
HTML:
źródło
Możesz to osiągnąć za pomocą właściwości css flex. Zobacz poniższy kod
źródło
Rozważ użycie
background-size: cover
(IE9 +) w połączeniu zbackground-image
. W przypadku IE8- istnieje wypełnienie .źródło
background-size
ma to sens tylko w przypadkubackground-image
określonych również (odpowiednio zaktualizowałem moją odpowiedź). Nie dotyczyIMG
elementów.Spróbuj tego:
Mam nadzieję że to pomoże
źródło
Aby to osiągnąć, możesz użyć div. bez tagu img :) mam nadzieję, że to pomoże.
źródło
Jedynym sposobem, w jaki osiągnąłem opisany scenariusz „najlepszego przypadku”, było umieszczenie obrazu jako tła:
źródło
Oto odpowiedź z obsługą IE,
object-fit
aby nie stracić współczynnikaUżywając prostego fragmentu kodu JS, aby wykryć, czy
object-fit
jest obsługiwany, a następnie zamieńimg
nasvg
Uwaga: istnieje również kilka
object-fit
wypełniaczy, które będąobject-fit
działać.Oto kilka przykładów:
źródło
Oto mój przykład roboczy. Użyłem sztuczki polegającej na ustawieniu obrazu jako tła kontenera div z tłem-size: cover i background-position: center center
Umieściłem obraz o szerokości: 100% i kryciu: 0, dzięki czemu jest niewidoczny. Zwróć uwagę, że pokazuję swój obraz tylko dlatego, że szczególnie interesuje mnie wywołanie zdarzenia kliknięcia dziecka.
Zwróć uwagę, że chociaż używam kątowego, jest to całkowicie nieistotne.
Wynik jest taki, który zdefiniujesz jako optymalny we wszystkich przypadkach
źródło
Wartości CSS
object-fit: cover
iobject-position: left center
właściwości rozwiązują teraz ten problem.źródło
źródło
Po prostu popraw wysokość obrazu i podaj szerokość = auto
źródło