Muszę sprawić, aby obraz rozciągał się do maksymalnego możliwego rozmiaru bez przepełnienia go <div>
lub przekrzywienia obrazu.
Nie mogę przewidzieć proporcji obrazu, więc nie ma sposobu, aby wiedzieć, czy użyć:
<img src="url" style="width: 100%;">
lub
<img src="url" style="height: 100%;">
Nie mogę użyć obu (tj. Style = "szerokość: 100%; wysokość: 100%;"), ponieważ spowoduje to rozciągnięcie obrazu w celu dopasowania <div>
.
Rozmiar <div>
ma ustawiony procent ekranu, co również jest nieprzewidywalne.
Odpowiedzi:
Aktualizacja 2016:
Nowoczesna przeglądarka zachowuje się znacznie lepiej. Wszystko, co musisz zrobić, to ustawić szerokość obrazu na 100% ( wersja demonstracyjna )
Ponieważ nie znasz współczynnika proporcji, będziesz musiał użyć skryptów. Oto jak zrobiłbym to z jQuery ( demo ):
CSS
HTML
Scenariusz
źródło
width:auto
lubheight:auto
nie wpływa na wyświetlanie obrazów. W rzeczywistości ze wszystkich właściwości, które stosuje się do obrazu,max-width: 100%
ma tylko jakikolwiek efekt i wpływa tylko na obraz pejzażowy. Ale co najważniejsze, twoja odpowiedź nie pomaga rozciągnąć małego obrazu, aby wypełnić większy pojemnik.Jest to o wiele łatwiejszy sposób, aby to zrobić tylko
CSS
iHTML
:HTML:
CSS:
Spowoduje to umieszczenie obrazu jako tła i rozciągnięcie go do
div
rozmiaru bez zniekształceń.źródło
background-size: cover;
to prawdziwa magia tutaj i to CSS3, ale ma rozsądną obsługę przeglądarki w najnowszych wersjach (patrz: w3schools.com/cssref/css3_pr_background-size.asp )<div style="background-image: url('path/to/image.jpg');" class="fill"></div>
background-size: cover
nie zachowuje współczynnika proporcji, przycinane są części obrazu, które nie są proporcjonalne do elementu. Zobacz tutajNie jest to idealne rozwiązanie, ale ten CSS może pomóc. Zoom jest tym, co sprawia, że ten kod działa, a współczynnik powinien teoretycznie być nieskończony, aby działał idealnie dla małych obrazów - ale 2, 4 lub 8 działa w większości przypadków dobrze.
źródło
zoom
miłości z Firefoksa !?zoom
zaimplementowany, ale tutaj jest link do błędu w przyszłości: bugzilla.mozilla.org/show_bug.cgi?id=390936Jeśli możesz, użyj obrazów tła i ustaw
background-size: cover
. Sprawi to, że tło obejmie cały element.CSS
Jeśli nie możesz użyć wbudowanych obrazów, istnieje kilka opcji. Po pierwsze jest
dopasowanie obiektowe
Ta właściwość działa na obrazy, filmy i inne obiekty podobne do
background-size: cover
.CSS
Niestety obsługa przeglądarki nie jest tak dobra, że IE do wersji 11 w ogóle jej nie obsługuje. Następna opcja używa jQuery
CSS + jQuery
HTML
CSS
Niestandardowa wtyczka jQuery
Użyj wtyczki w ten sposób
Weźmie obraz, ustawi go jako obraz tła na elemencie opakowania obrazu i usunie
img
znacznik z dokumentu. Wreszcie możesz użyćCzysty CSS
Możesz użyć tego jako rezerwowego. Obraz zostanie przeskalowany w górę, aby przykryć jego pojemnik, ale nie będzie go zmniejszać.
CSS
Mam nadzieję, że to może komuś pomóc, szczęśliwego kodowania!
źródło
min-
i zmieniłem sięwidth: 100%; height: 100%;
i działałem! niesamowite rozwiązanie! +1 dzięki!background-size: contain
jest również przydatny, jeśli nie chcesz, aby żaden obraz został przycięty.zoom:0.001
do rozwiązania Pure CSS, aby zmniejszyć.Dzięki CSS3
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
IE i EDGE jak zawsze outsider: http://caniuse.com/#feat=object-fit
źródło
Aktualizacja 2019.
Możesz teraz użyć
object-fit
właściwości css, która akceptuje następujące wartości:fill | contain | cover | none | scale-down
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Na przykład możesz mieć kontener, w którym znajduje się obraz.
źródło
Jest to niemożliwe tylko w przypadku HTML i CSS, a przynajmniej niezwykle egzotyczne i skomplikowane. Jeśli chcesz wrzucić trochę javascript, oto rozwiązanie wykorzystujące jQuery:
Spowoduje to zmianę rozmiaru obrazu, aby zawsze mieścił się w elemencie nadrzędnym, niezależnie od jego rozmiaru. Po powiązaniu ze
$(window).resize()
zdarzeniem, gdy użytkownik zmieni rozmiar okna, obraz się dostosuje.To nie próbuje wyśrodkować obrazu w kontenerze, byłoby to możliwe, ale myślę, że nie o to ci chodzi.
źródło
Ustaw szerokość i wysokość zewnętrznego
container
div. Następnie użyj stylizacji poniżej na img:Pomoże to zachować proporcje obrazu
źródło
Jeśli chcesz ustawić maksymalną szerokość lub wysokość (aby nie była bardzo duża), zachowując proporcje obrazów, możesz to zrobić:
źródło
Natknąłem się na to pytanie, szukając podobnego problemu. Tworzę stronę internetową z responsywnym projektem, a szerokość elementów umieszczonych na stronie jest ustawiona na procent szerokości ekranu. Wysokość jest ustawiana za pomocą wartości vw.
Ponieważ dodałem posty z PHP i zapleczem bazy danych, czysty CSS nie wchodziło w rachubę. Uważam jednak, że rozwiązanie jQuery / javascript jest trochę kłopotliwe, więc wpadłem na fajne (przynajmniej tak uważam) rozwiązanie.
HTML (lub php)
Używając style = "" możliwe jest, że PHP dynamicznie aktualizuje moją stronę, a styl CSS wraz ze stylem = "" kończy się na idealnie zakrytym obrazie, skalowanym tak, aby obejmował dynamiczny tag div.
źródło
Możesz użyć
object-fit: cover;
na rodzica div.https://css-tricks.com/almanac/properties/o/object-fit/
źródło
Aby ten obraz rozciągnął się do maksymalnego możliwego rozmiaru bez przepełnienia go lub przekrzywienia obrazu.
Zastosować...
style na obrazie.
źródło
Za pomocą tej metody możesz wypełnić swój div obrazem o różnym stosunku div i image.
jQuery:
HTML:
CSS:
źródło
To załatwiło sprawę
źródło
jeśli pracujesz z tagiem IMG, jest to łatwe.
Ja to zrobiłem:
ale nie znalazłem sposobu, aby to działało z #pic {background: url (img / menu.png)} Enyone? Dzięki
źródło
Miałem podobny problem. Rozwiązałem to za pomocą CSS .
Zasadniczo
Object-fit: cover
pomaga osiągnąć zadanie utrzymania proporcji podczas pozycjonowania obrazu wewnątrz div.Ale problem
Object-fit: cover
nie działał w IE i zajmował 100% szerokości i 100% wysokości, a proporcje obrazu były zniekształcone. Innymi słowy, efekt powiększania obrazu nie istniał, co widziałem w chromie.Podjąłem podejście polegające na umieszczeniu obrazu w pojemniku z wartością bezwzględną, a następnie umieszczeniu go dokładnie na środku za pomocą kombinacji:
Gdy znajdzie się w centrum, daję obrazowi,
Dzięki temu obraz uzyskuje efekt Object-fit: cover.
Oto demonstracja powyższej logiki.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Ta logika działa we wszystkich przeglądarkach.
źródło
HTML:
JSFiddle
... A jeśli chcesz ustawić lub zmienić obraz (na przykładzie #foo):
jQuery:
JavaScript:
źródło
Wiele znalezionych tutaj rozwiązań ma pewne ograniczenia: niektóre nie działają w IE (dopasowanie obiektowe) lub starszych przeglądarkach, inne rozwiązania nie skalują obrazów (tylko je zmniejszają), wiele rozwiązań nie obsługuje zmiany rozmiaru okna i wiele z nich jest nie ogólne, albo oczekuj stałej rozdzielczości lub układu (pionowa lub pozioma)
Jeśli używanie javascript i jquery nie stanowi problemu, mam to rozwiązanie oparte na kodzie @Tatu Ulmanen. Rozwiązałem niektóre problemy i dodałem kod na wypadek, gdyby obraz został załadowany dynamicznie i niedostępny na początku. Zasadniczo chodzi o to, aby mieć dwie różne reguły css i stosować je w razie potrzeby: jedną, gdy ograniczeniem jest wysokość, więc musimy pokazywać czarne pasy po bokach, a drugą zasadę css, gdy ograniczeniem jest szerokość, więc musimy pokaż czarne paski u góry / u dołu.
W przypadku elementu HTML takiego jak:
źródło