Wiem, że nie da się tak naprawdę zmodyfikować obrazu za pomocą CSS, dlatego umieszczam kadr w cudzysłowie.
Chciałbym zrobić prostokątne obrazy i użyć CSS, aby wyglądały na kwadratowe bez zniekształcania obrazu.
Zasadniczo chciałbym to zmienić:
Zaangażowany w to:
background-position
lub starego wrappera div zoverflow:hidden
obrazem i pozycjonowaniem względnym.Odpowiedzi:
Zakładając, że nie muszą znajdować się w tagach IMG ...
HTML:
CSS:
EDYTUJ: Jeśli div musi gdzieś linkować, dostosuj HTML i style w następujący sposób:
HTML:
CSS:
Zauważ, że można to również zmodyfikować, aby było responsywne, na przykład% szerokości i wysokości itp.
źródło
height: 460px; width: 100%;
i działa jak urokCzyste rozwiązanie CSS bez wrappera
div
i innego bezużytecznego kodu:źródło
overflow:hidden
).Na przykład:
źródło
Korzystanie z rozmiaru tła: okładka - http://codepen.io/anon/pen/RNyKzB
CSS:
Narzut:
źródło
Właściwie ostatnio natknąłem się na ten sam problem i skończyłem z nieco innym podejściem (nie mogłem użyć obrazów tła). Wymaga to jednak odrobiny jQuery, aby określić orientację obrazów (jestem pewien, że zamiast tego można użyć zwykłego JS).
Napisałem o tym post na blogu, jeśli interesuje cię więcej wyjaśnień, ale kod jest dość prosty:
HTML:
CSS:
jQuery:
źródło
$(this).load(function(){...
wewnątrz każdej pętli, więc jQuery czeka trochę, aż obraz zostanie załadowany i uzyska rzeczywiste wymiary obrazu.Jeśli obraz znajduje się w kontenerze o elastycznej szerokości:
HTML
CSS
źródło
Miałem podobny problem i nie mogłem „pójść na kompromis” z obrazami tła. Wymyśliłem to.
Mam nadzieję że to pomoże!
Przykład: https://jsfiddle.net/cfbuwxmr/1/
źródło
Użyj CSS: przepełnienie:
źródło
Użyj elementu div o kwadratowych wymiarach z obrazem w środku z klasą .testimg:
lub kwadratowy element DIV z tłem obrazu.
Oto kilka przykładów: http://jsfiddle.net/QqCLC/1/
ZAKTUALIZOWANO CENTRUM OBRAZU
źródło
object-fit: cover
zrobi dokładnie to, czego potrzebujesz.Ale może nie działać w IE / Edge. Postępuj zgodnie z poniższymi instrukcjami, aby naprawić to za pomocą CSS, który działa we wszystkich przeglądarkach .
Podejście, które zastosowałem, polegało na umieszczeniu obrazu w pojemniku za pomocą wartości absolutnej, a następnie umieszczeniu go dokładnie w środku, używając kombinacji:
Gdy jest w centrum, daję obrazowi,
Dzięki temu obraz uzyskuje efekt Dopasowanie obiektu: okładka.
Oto demonstracja powyższej logiki.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Ta logika działa we wszystkich przeglądarkach.
Oryginalny obraz
Przycięte pionowo
Przycięte w poziomie
źródło