Czy istnieje rozwiązanie tylko CSS umożliwiające skalowanie obrazu do ramki ograniczającej (zachowując współczynnik proporcji)? Działa to, jeśli obraz jest większy niż kontener:
img {
max-width: 100%;
max-height: 100%;
}
Przykład:
- Przypadek użycia 1 (działa): http://jsfiddle.net/Jp5AQ/2/
- Przypadek użycia 2 (działa): http://jsfiddle.net/Jp5AQ/3/
Ale chcę przeskalować obraz, aż wymiar będzie stanowił 100% kontenera.
- Przypadek użycia 3 (nie działa): http://jsfiddle.net/Jp5AQ/4/
Odpowiedzi:
Uwaga: mimo że jest to akceptowana odpowiedź, poniższa odpowiedź jest dokładniejsza i jest obecnie obsługiwana we wszystkich przeglądarkach, jeśli masz możliwość korzystania z obrazu tła.
Nie, nie ma jedynego sposobu CSS, aby to zrobić w obu kierunkach. Możesz dodać
Aby element zawsze miał 100% szerokości i automatycznie skalował wysokość do współczynnika proporcji lub odwrotnie:
aby zawsze skalować do maksymalnej wysokości i względnej szerokości. Aby zrobić jedno i drugie, musisz określić, czy współczynnik proporcji jest wyższy, czy niższy niż jego kontener, a CSS nie może tego zrobić.
Powodem jest to, że CSS nie wie, jak wygląda strona. Z góry ustala zasady, ale dopiero potem renderuje się elementy i wiesz dokładnie, z jakimi rozmiarami i proporcjami masz do czynienia. Jedynym sposobem na wykrycie tego jest JavaScript.
Chociaż nie szukasz rozwiązania JS, i tak dodam, jeśli ktoś może go potrzebować. Najłatwiejszym sposobem radzenia sobie z tym za pomocą JavaScript jest dodanie klasy na podstawie różnicy w stosunku. Jeśli stosunek szerokości do wysokości pudełka jest większy niż obrazu, dodaj klasę „fillwidth”, w przeciwnym razie dodaj klasę „fillheight”.
Pokaż fragment kodu
źródło
Dzięki CSS3 jest rozwiązanie!
Rozwiązaniem jest umieścić obraz jako
background-image
, a następnie ustawićbackground-size
sięcontain
.HTML
CSS
Przetestuj tutaj: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
Pełna zgodność z najnowszymi przeglądarkami: http://caniuse.com/background-img-opts
Aby wyrównać element div do środka, możesz użyć tej odmiany:
źródło
<div class=image style="background-image: url('/images/foo.jpg');"></div>
. Wszystkie inne style należy stosować za pomocą CSS.Oto hakerskie rozwiązanie, które odkryłem:
Spowoduje to dziesięciokrotne powiększenie obrazu, ale ograniczy go do 10% ostatecznego rozmiaru - w ten sposób ograniczając go do pojemnika.
W przeciwieństwie do
background-image
rozwiązania sprawdzi się to również z<video>
elementami.Interaktywny przykład:
Pokaż fragment kodu
źródło
transform-origin: top left
aby zatrzymać kadrowanie. / ZombieDziś wystarczy powiedzieć object-fit: include. Wsparcie to wszystko oprócz IE: http://caniuse.com/#feat=object-fit
źródło
object-fit
jest nadal w fazie rozwoju.object-fit
html:
css:
źródło
Możesz to osiągnąć dzięki czystemu CSS i pełnej obsłudze przeglądarek, zarówno dla obrazów w pionie, jak i w poziomie w tym samym czasie.
Oto fragment, który działa w przeglądarkach Chrome, Firefox i Safari (zarówno przy użyciu
object-fit: scale-down
, jak i bez niego):źródło
Inne rozwiązanie bez obrazu tła i bez potrzeby stosowania kontenera (chociaż należy znać maksymalne rozmiary ramki ograniczającej):
Jeśli wymagane jest użycie kontenera, wówczas maksymalna szerokość i maksymalna wysokość mogą być ustawione na 100%:
Do tego miałbyś coś takiego:
źródło
Ten przykład przedstawia proporcjonalne rozciągnięcie obrazu w celu dopasowania do całego okna. Improwizacją do powyższego poprawnego kodu jest dodanie
$( window ).resize(function(){});
Są dwa warunki warunkowe. Pierwsza z nich sprawdza, czy wysokość obrazu jest mniejsza niż div i stosuje
.fillheight
klasę, podczas gdy następna sprawdza szerokość i stosuje.fillwidth
klasę. W obu przypadkach druga klasa jest usuwana za pomocą.removeClass()
Oto CSS
Możesz zamienić
100vh
na,100%
jeśli chcesz rozciągnąć obraz w div. Ten przykład przedstawia proporcjonalne rozciągnięcie obrazu w celu dopasowania do całego okna.źródło
Czy chcesz skalować w górę, ale nie w dół?
Nie powoduje to jednak blokady współczynnika kształtu.
źródło
Użyłem tabeli do wyśrodkowania obrazu wewnątrz pudełka. Zachowuje proporcje i skaluje obraz w sposób całkowicie wewnątrz pudełka. Jeśli obraz jest mniejszy niż ramka, jest wyświetlany tak, jak jest w środku. Poniższy kod używa pola o szerokości 40 pikseli i wysokości 40 pikseli. (Nie jestem pewien, jak dobrze to działa, ponieważ usunąłem go z innego, bardziej złożonego kodu i trochę uprościłem)
CSS:
HTML:
źródło
Najczystszy i najprostszy sposób na zrobienie tego:
Najpierw trochę CSS:
HTML:
To powinno załatwić sprawę!
źródło
Pomogło mi to:
Następnie na elemencie (możesz użyć javascript lub zapytań o media, aby dodać responsywność):
Mam nadzieję że to pomoże!
źródło
Edytuję swoją odpowiedź, aby dokładniej wyjaśnić moje rozwiązanie, ponieważ mam głos negatywny.
Po ustawieniu stylów, jak pokazano powyżej w css, teraz następujący element HTML HTML będzie pokazywał obraz zawsze dopasowany do szerokości i dostosuje wysokość do szerokości. W ten sposób obraz zostanie przeskalowany, aby dopasować go do obwiedni zadanej w pytaniu.
źródło