Pracuję z obrazami i natknąłem się na problem ze współczynnikami kształtu.
<img src="big_image.jpg" width="900" height="600" alt="" />
Jak widać height
i width
są już określone. Dodałem regułę CSS dla obrazów:
img {
max-width:500px;
}
Ale dla big_image.jpg
, otrzymuję width=500
i height=600
. Jak mogę zmienić rozmiar zdjęć, zachowując jednocześnie ich proporcje.
css
image
aspect-ratio
Moonvader
źródło
źródło
<img>
samej szerokości i wysokości i myślę, że oznacza to, że musisz użyć,!important
aby obejść informacje o szerokości / wysokości znacznika.!important
nie jest potrzebne.Bardzo mocno zmagałem się z tym problemem i ostatecznie doszedłem do tego prostego rozwiązania:
Możesz dopasować szerokość i wysokość do swoich potrzeb, a właściwość dopasowania obiektu wykona dla Ciebie przycięcie.
Twoje zdrowie.
źródło
object-fit
jest fantastyczny, świetna wskazówka! Istnieją pewne biblioteki bibliotek wypełniających, jeśli ktoś zastanawia się nad zgodnością z IE.object-fit: contain
i określić szerokość lub wysokość!Poniższe rozwiązania umożliwią powiększanie i zmniejszanie obrazu , w zależności od szerokości ramki nadrzędnej.
Wszystkie obrazy mają kontener nadrzędny o stałej szerokości wyłącznie do celów demonstracyjnych . W produkcji będzie to szerokość pudełka nadrzędnego.
Najlepsza praktyka (2018):
To rozwiązanie informuje przeglądarkę o renderowaniu obrazu z maksymalną dostępną szerokością i dostosowaniem wysokości jako wartości procentowej tej szerokości.
Bardziej zaawansowane rozwiązanie:
Dzięki bardziej zaawansowanemu rozwiązaniu możesz przyciąć obraz niezależnie od jego wielkości i dodać kolor tła, aby zrekompensować przycięcie.
W przypadku linii wypełniającej należy obliczyć proporcje obrazu, na przykład:
Zatem górne wypełnienie = 34,37%.
źródło
!important
jest to potrzebne.Właściwość background-size to np.> = 9, ale jeśli nie masz nic przeciwko, możesz użyć div za pomocą
background-image
i ustawićbackground-size: contain
:Teraz możesz po prostu ustawić rozmiar div na cokolwiek zechcesz, a obraz nie tylko zachowa proporcje, ale zostanie również scentralizowany w pionie i poziomie w div. Tylko nie zapomnij ustawić rozmiarów na css, ponieważ divs nie mają atrybutu width / height na samym tagu.
Podejście to różni się od odpowiedzi setecs, dzięki temu obszar obrazu będzie stały i zdefiniowany przez ciebie (pozostawiając puste przestrzenie w poziomie lub w pionie w zależności od rozmiaru div i proporcji obrazu), podczas gdy odpowiedź setecs da ci pole, które dokładnie rozmiar przeskalowanego obrazu (bez pustych spacji).
Edycja: Zgodnie z dokumentacją wielkości tła MDN można symulować właściwość wielkości tła w IE8 przy użyciu zastrzeżonej deklaracji filtra:
źródło
Bardzo podobne do niektórych odpowiedzi tutaj, ale w moim przypadku miałem obrazy, które czasami były wyższe, a czasem większe.
Ten styl działał jak urok, aby upewnić się, że wszystkie obrazy zajmują całą dostępną przestrzeń, zachowują współczynnik, a nie tną:
źródło
object-fit
działa dla mnie, czy działa we wszystkich przeglądarkach?.img
klasa jest nadrzędna czy na obrazie? Czy możesz zrobić jsfiddle z przykładem zarówno portretów, jak i krajobrazów?Usuń właściwość „wysokość”.
Określając oba, zmieniasz proporcje obrazu. Tylko ustawienie jednego spowoduje zmianę rozmiaru, ale zachowanie proporcji.
Opcjonalnie, aby ograniczyć przewymiarowanie:
źródło
height
atrybutu wimg
znaczniku jest to, że przeglądarka nie może obliczyć, ile miejsca zajmie obraz przed pobraniem obrazu. Spowoduje to spowolnienie renderowania strony i może prowadzić do „przeskakiwania”.Po prostu dodaj to do swojego css, automatycznie się zmniejszy i rozszerzy z zachowaniem oryginalnego stosunku.
źródło
100%
zamiast określonej wartości w pikselach.display: block;
jest niepotrzebne.Nie ma standardowy sposób, aby zachować proporcje obrazów z
width
,height
imax-width
określono razem.Jesteśmy więc zmuszeni albo określić
width
iheight
zapobiec „przeskokom” strony podczas ładowania obrazów, albo użyćmax-width
i nie określać wymiarów obrazów.Podanie tylko
width
(bezheight
) zwykle nie ma większego sensu, ale możesz spróbować zastąpićheight
atrybut HTML, dodając regułęIMG {height: auto; }
do arkusza stylów.Zobacz także powiązany błąd przeglądarki Firefox 392261 .
źródło
!important
w CSS. To hack, który w końcu wróci, by cię prześladować.!important
tu nie potrzebujesz .Oto rozwiązanie:
Dzięki temu obraz zawsze będzie obejmował cały element nadrzędny (skalowanie w dół i w górę) i zachowa ten sam współczynnik kształtu.
źródło
Ustaw klasę CSS tagu kontenera obrazu na
image-class
:i dodaj to do swojego arkusza stylów CSS.
źródło
Aby zachować responsywny obraz przy jednoczesnym wymuszaniu określonego obrazu, możesz wykonać następujące czynności:
HTML:
I SCSS:
Można tego użyć do wymuszenia określonego współczynnika proporcji, niezależnie od rozmiaru obrazu przesyłanego przez autorów.
Dzięki @Kseso na http://codepen.io/Kseso/pen/bfdhg . Sprawdź ten adres URL, aby uzyskać więcej współczynników i działający przykład.
źródło
border-radius
. Ale niestety, przycina obraz i nie radzi sobie tak dobrze z tworzeniem ramki dla obrazu w div, o ile próbowałem.Aby wymusić dopasowanie obrazu do dokładnego rozmiaru, nie trzeba pisać zbyt wielu kodów. To takie proste
źródło
https://jsfiddle.net/sot2qgj6/3/
Oto odpowiedź, jeśli chcesz umieścić obraz ze stałym procentem szerokości , ale nie ze stałym pikselem szerokości .
Przyda się to w przypadku różnych rozmiarów ekranu .
Sztuczki są
padding-top
ustawić wysokość od szerokości.position: absolute
do umieszczania obrazu w polu wypełnienia.max-height and max-width
aby upewnić się, że obraz nie będzie nad elementem nadrzędnym.display:block and margin: auto
aby wyśrodkować obraz.Skomentowałem także większość sztuczek w skrzypcach.
Znajduję też inne sposoby, aby to osiągnąć. W html nie będzie prawdziwego obrazu, więc osobiście wybieram najlepszą odpowiedź, gdy potrzebuję elementu „img” w html.
prosty css za pomocą tła http://jsfiddle.net/4660s79h/2/
obraz w tle ze słowem na górze http://jsfiddle.net/4660s79h/1/
koncepcja użycia pozycji absolutnej pochodzi stąd http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
źródło
Możesz użyć tego:
źródło
Możesz utworzyć div w ten sposób:
I użyj tego css, aby go stylizować:
źródło
Sugeruję, aby w ramach responsywnego podejścia najlepszą praktyką byłoby użycie jednostek Viewport i atrybutów min / max w następujący sposób:
źródło
Spowoduje to zmniejszenie obrazu, jeśli jest zbyt duży dla określonego obszaru (jako minus, nie powiększy obrazu).
Rozwiązanie setec jest dobre dla „Shrink to Fit” w trybie automatycznym. Ale aby optymalnie ROZSZERZAĆ, aby zmieściło się w trybie „automatycznym”, musisz najpierw ustawić otrzymany obraz w temp id. Sprawdź, czy można go rozszerzyć na wysokość czy szerokość (w zależności od proporcji v / s proporcji twój blok wyświetlacza),
To podejście jest przydatne, gdy otrzymane obrazy są mniejsze niż pole wyświetlania. Musisz zapisać je na serwerze w oryginalnym małym rozmiarze, a nie w rozszerzonej wersji, aby wypełnić swoje większe okno wyświetlacza, aby zaoszczędzić na rozmiarze i przepustowości.
źródło
źródło
Co powiesz na użycie pseudoelementu do wyrównania w pionie? Ten mniej kodu dotyczy karuzeli, ale chyba działa na każdym kontenerze o stałym rozmiarze. Zachowa proporcje i wstawi @ szaro-ciemne paski na górze / dole lub w lewo / napisz dla najkrótszego wymiaru. W międzyczasie obraz jest wyśrodkowany poziomo przez wyrównanie tekstu i pionowo przez pseudo element.
źródło
Prezentacja pełnoekranowa:
Należy pamiętać, że jeśli wysokość portu widoku jest większa niż obraz, obraz naturalnie pogorszy się w stosunku do różnicy.
źródło
Myślę, że w końcu jest to najlepsze rozwiązanie, łatwe i proste :
źródło