Chcę utworzyć taki, div
który może zmieniać szerokość / wysokość wraz ze zmianą szerokości okna.
Czy są jakieś reguły CSS3, które pozwoliłyby na zmianę wysokości w zależności od szerokości, przy jednoczesnym zachowaniu proporcji ?
Wiem, że mogę to zrobić za pomocą JavaScript, ale wolałbym używać tylko CSS.
Odpowiedzi:
Wystarczy utworzyć opakowanie
<div>
z wartością procentową dlapadding-bottom
:Spowoduje to, że
<div>
wysokość będzie równa 75% szerokości pojemnika (współczynnik kształtu 4: 3).Opiera się to na tym, że w przypadku wypełnienia:
Wartości dopełnienia do dołu dla innych współczynników kształtu i 100% szerokości:
Umieszczanie treści w div:
Aby zachować współczynnik kształtu div i zapobiec jego rozciągnięciu, musisz dodać dziecko o absolutnej pozycji i rozciągnąć go na brzegach opakowania za pomocą:
Oto demo i kolejne bardziej szczegółowe demo
źródło
vw
jednostki:Możesz użyć
vw
jednostek zarówno dla szerokości, jak i wysokości elementu. Umożliwia to zachowanie proporcji elementu na podstawie szerokości rzutni.Alternatywnie, możesz również użyć
vh
dla wysokości rzutni, a nawetvmin
/,vmax
aby użyć mniejszych / większych wymiarów rzutni ( tutaj dyskusja ).Przykład: proporcje 1: 1
W przypadku innych współczynników kształtu możesz skorzystać z poniższej tabeli, aby obliczyć wartość wysokości zgodnie z szerokością elementu:
Przykład: siatka 4x4 kwadratowych div
Oto Fiddle w tej wersji demonstracyjnej, a tutaj jest rozwiązanie, aby stworzyć responsywną siatkę kwadratów z zawartością pionową i poziomą .
Obsługa przeglądarek dla jednostek vh / vw to IE9 +, patrz canIuse, aby uzyskać więcej informacji
źródło
width:50%
aheight:50vw
wysokość jest nieco wyższa niż szerokość, więc nie dokładnie proporcja 1: 1. Jakieś pomysły?Znalazłem sposób na zrobienie tego za pomocą CSS, ale musisz być ostrożny, ponieważ może się to zmienić w zależności od przepływu Twojej strony internetowej. Zrobiłem to, aby osadzić wideo o stałym współczynniku kształtu w części szerokości witryny na mojej stronie.
Załóżmy, że masz osadzony film:
Następnie możesz umieścić to wszystko w div z klasą „wideo”. Ta klasa wideo prawdopodobnie będzie płynnym elementem w Twojej witrynie, tak że sama w sobie nie ma bezpośrednich ograniczeń wysokości, ale po zmianie rozmiaru przeglądarki zmieni szerokość w zależności od przepływu strony internetowej. Byłby to element, w którym prawdopodobnie próbujesz uzyskać osadzone wideo przy zachowaniu określonego współczynnika kształtu wideo.
W tym celu umieszczam obraz przed osadzonym obiektem w div klasy „video”.
!!! Ważne jest, aby obraz miał prawidłowy współczynnik kształtu, który chcesz zachować. Upewnij się również, że rozmiar obrazu jest NAJMNIEJ tak duży, jak najmniejsze, czego oczekujesz, że wideo (lub cokolwiek utrzymujesz AR) będzie oparte na twoim układzie. Pozwoli to uniknąć potencjalnych problemów z rozdzielczością obrazu, gdy zostanie on zmieniony w procentach. Na przykład, jeśli chcesz zachować proporcje 3: 2, nie używaj tylko obrazu 3 na 2 piksele. Może działać w pewnych okolicznościach, ale nie przetestowałem go i prawdopodobnie dobrym pomysłem byłoby go uniknąć.
Prawdopodobnie powinieneś już mieć taką minimalną szerokość zdefiniowaną dla płynnych elementów swojej witryny. Jeśli nie, warto to zrobić, aby uniknąć odcinania elementów lub nakładania się, gdy okno przeglądarki staje się zbyt małe. W pewnym momencie lepiej jest mieć pasek przewijania. Najmniejsza szerokość, jaką powinna uzyskać strona internetowa, to około ~ 600 pikseli (w tym dowolne kolumny o stałej szerokości), ponieważ rozdzielczości ekranu nie są mniejsze, chyba że masz do czynienia z witrynami przyjaznymi dla telefonu. !!!
Używam całkowicie przezroczystego PNG, ale nie sądzę, żeby miało to znaczenie, jeśli zrobisz to dobrze. Lubię to:
Teraz powinieneś być w stanie dodać CSS podobny do następującego:
Upewnij się, że usunąłeś również wszelkie wyraźne deklaracje wysokości lub szerokości w obiekcie i umieściłeś znaczniki, które zwykle pochodzą z kopiowanym / wklejanym kodem osadzania.
Sposób jego działania zależy od właściwości pozycji elementu klasy wideo i żądanego elementu ma określony współczynnik kształtu. Wykorzystuje sposób, w jaki obraz zachowa odpowiedni współczynnik kształtu po zmianie rozmiaru w elemencie. Mówi cokolwiek innego, co znajduje się w elemencie klasy wideo, aby w pełni skorzystać z nieruchomości zapewnianej przez obraz dynamiczny, zmuszając jego szerokość / wysokość do 100% elementu klasy wideo dostosowywanego przez obraz.
Całkiem fajnie, co?
Być może będziesz musiał się z nim trochę pobawić, aby uruchomić go z własnym projektem, ale dla mnie to zadziwiająco dobrze. Istnieje ogólna koncepcja.
źródło
Elliot zainspirował mnie do tego rozwiązania - dzięki:
aspectratio.png
to całkowicie przezroczysty plik PNG o rozmiarze preferowanego współczynnika proporcji, w moim przypadku 30x10 pikseli.HTML
CSS3
Proszę zanotować:
background-size
jest funkcją css3, która może nie działać z twoimi przeglądarkami docelowymi. Możesz sprawdzić interoperacyjność (np. Na caniuse.com ).źródło
Aby dodać do odpowiedzi Web_Designera,
<div>
będzie miał wysokość (w całości złożoną z dolnego wypełnienia) wynoszącą 75% szerokości jego zawierającego elementu . Oto dobre podsumowanie: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Nie jestem pewien, dlaczego tak powinno być, ale tak właśnie jest.Jeśli chcesz, aby div miał szerokość inną niż 100%, potrzebujesz innego zawijanego div, na którym ustawisz szerokość:
Ostatnio użyłem czegoś podobnego do sztuczki graficznej Elliota, aby pozwolić mi na użycie zapytań o media CSS w celu wyświetlenia innego pliku logo w zależności od rozdzielczości urządzenia, ale nadal skaluje się proporcjonalnie, jak to
<img>
naturalnie zrobię (ustawiam logo jako obraz tła na przezroczysty plik .png z prawidłowym współczynnikiem kształtu). Ale rozwiązanie Web_Designer uratuje mi żądanie HTTP.źródło
Jak stwierdzono tutaj na w3schools.com i nieco powtórzono w tej zaakceptowanej odpowiedzi , wartości dopełniania jako wartości procentowe (moje podkreślenie):
Ergo, poprawny przykład responsywnego DIV, który utrzymuje proporcje 16: 9, jest następujący:
CSS
HTML
Demo na JSFiddle
źródło
Ponieważ @ web-tiki już pokazuje sposób korzystania z
vh
/vw
, potrzebuję również sposobu na wyśrodkowanie ekranu, oto fragment kodu dla portretu 9:16 .translateY
zatrzyma to centrum na ekranie.calc(100vw * 16 / 9)
oczekiwana wysokość dla 9/16.(100vw * 16 / 9 - 100vh)
ma wysokość przelewu, więc podciągnięcieoverflow height/2
spowoduje utrzymanie go na środku ekranu.Dla krajobrazu i zachowaj 16: 9 , pokazujesz użycie
Współczynnik 9/16 jest łatwy do zmiany, bez potrzeby wcześniejszego definiowania
100:56.25
lub.100:75
Jeśli chcesz najpierw zapewnić wysokość, powinieneś zmienić szerokość i wysokość, np.height:100vh;width: calc(100vh * 9 / 16)
Dla portretu 9:16.Jeśli chcesz dostosować do innego rozmiaru ekranu, możesz również zainteresować
@media (orientation: portrait)
/@media (orientation: landscape)
portrait
/ wlandscape
celu zmiany proporcji.źródło
Jest to poprawka do przyjętej odpowiedzi:
źródło
Natknąłem się na inteligentne rozwiązanie za pomocą
<svg>
idisplay:grid
.Element siatki pozwala zajmować to samo miejsce z dwoma (lub więcej) elementami, bez potrzeby określania, który z nich określa wysokość. Co oznacza, że po wyjęciu z pudełka wyższy ustawia współczynnik .
Oznacza to, że możesz z niego korzystać w takiej postaci, w której wiesz, że zawartość nigdy nie będzie wystarczająco wysoka, aby wypełnić cały „współczynnik”, a po prostu szukasz sposobu na umieszczenie zawartości w tym miejscu (tj. Wyśrodkowanie jej w obu kierunkach.
display:flex; align-items:center; justify-content:center
).Jest to prawie to samo, co użycie przezroczystego
<img>
zdisplay:block
góry określonego współczynnika, z tym wyjątkiem, że<svg>
jest lżejszy i znacznie łatwiejszy do modyfikacji (aby zmienić współczynnik odpowiednio, jeśli zajdzie taka potrzeba).Wszystko, co musisz zrobić, to zmienić
<svg>
współczynnik s:<svg viewBox="0 0 4 3"></svg>
<svg viewBox="0 0 16 9"></svg>
Zobacz, jak działa:
Pokaż fragment kodu
Jeśli potrzebujesz rozwiązania, w którym element treści nie może ustawić współczynnika, gdy jest wyższy (z ukrytym przepełnieniem lub auto), musisz ustawić
position:relative
na siatce iposition:absolute; height:100%; overflow-y: auto;
na zawartości. Przykład:Pokaż fragment kodu
źródło
Bazując na twoich rozwiązaniach, podjąłem sztuczkę:
Gdy go użyjesz, twój HTML będzie tylko
Aby użyć tego w ten sposób, wykonaj: CSS:
i js (jQuery)
Mając to, właśnie ustawiłeś attr
data-keep-ratio
na wysokość / szerokość i to wszystko.źródło
data-keep-ratio
nie używaćkeep-ratio
i uzyskać jego wartość używając$(this).data('keep-ratio');
Możesz użyć SVG. Ustaw względnie pozycję kontenera / opakowania, najpierw ustaw svg jako statycznie pozycjonowane, a następnie umieść absolutnie pozycjonowaną zawartość (góra: 0; lewo: 0; prawo: 0; dół: 0;)
Przykład z proporcjami 16: 9:
image.svg: (można wstawić w src)
CSS:
HTML:
Zauważ, że inline svg nie działa, ale możesz urlencode svg i osadzić go w atrybucie img src w następujący sposób:
źródło
SCSS jest najlepszym rozwiązaniem w moim przypadku; za pomocą atrybutu danych:
Na przykład :
źródło
źródło
[data-aspect-ratio]
Selektor atrybutu jest dostępne w CSS.Chociaż większość odpowiedzi jest bardzo fajna, większość z nich wymaga, aby obraz był już odpowiednio zwymiarowany ... Inne rozwiązania działają tylko dla szerokości i nie dbają o dostępną wysokość, ale czasami chcesz dopasować zawartość również do określonej wysokości .
Próbowałem połączyć je ze sobą, aby uzyskać w pełni przenośne i skalowalne rozwiązanie ... Sztuką jest użycie do automatycznego skalowania obrazu, ale użycie wbudowanego elementu svg zamiast użycia wstępnie renderowanego obrazu lub dowolnej formy drugie żądanie HTTP ...
Zauważ, że użyłem dużych wartości w atrybutach szerokości i wysokości pliku SVG, ponieważ musi on być większy niż maksymalny oczekiwany rozmiar, ponieważ może on się tylko kurczyć. W tym przykładzie współczynnik div wynosi 10: 5
źródło
Tylko pomysł lub hack.
źródło
powiedzmy, że masz 2 div div outher jest kontenerem, a wewnętrzna może być dowolnym elementem, którego potrzebujesz, aby zachować jego stosunek (img lub iframe na youtube lub cokolwiek innego)
HTML wygląda następująco:
powiedzmy, że musisz zachować stosunek „elementu”
stosunek => 4 do 1 lub 2 do 1 ...
css wygląda tak
wypełnienie, gdy podano w%, jest obliczane na podstawie szerokości, a nie wysokości. .. więc w zasadzie nie ma znaczenia, jaką szerokość będzie zawsze obliczać na podstawie tego. który zachowa stosunek.
źródło
Jeśli chcesz dopasować kwadrat w okienku ekranu w widoku pionowym lub poziomym (tak duży, jak to możliwe, ale nic nie wystaje na zewnątrz), przełącz się między użyciem
vw
/vh
orientacjiportrait
/landscape
:źródło
Chciałbym udostępnić moje rozwiązanie, w którym mam
img
tag wypełniający pewien współczynnik kształtu. I nie mógł skorzystaćbackground
z powodu braku wsparcia CMS, a ja nie, że wolą używać tagu stylu tak:<img style="background:url(...)" />
. Ponadto szerokość wynosi 100%, więc nie trzeba ustawiać jej na stały rozmiar, jak w niektórych rozwiązaniach. Skaluje się odpowiednio!źródło
Problem ten napotkałem już kilka razy, więc stworzyłem dla niego rozwiązanie JS. Zasadniczo dostosowuje wysokość domElement zgodnie z szerokością elementu o określony współczynnik. Możesz użyć tego w następujący sposób:
<div ratio="4x3"></div>
Należy pamiętać, że ponieważ ustawia wysokość elementu, element powinien mieć wartość a
display:block
lubdisplay:inline-block
.https://github.com/JeffreyArts/html-ratio-component
źródło
Możesz to osiągnąć za pomocą SVG.
To zależy od przypadku, ale w niektórych jest naprawdę przydatne. Jako przykład - możesz ustawić
background-image
bez ustawiania stałej wysokości lub użyć go do osadzenia youtube<iframe>
ze współczynnikiem16:9
iposition:absolute
etc.Dla
3:2
zestawu proporcjiviewBox="0 0 3 2"
i tak dalej.Przykład:
źródło
Powiedz, że chcesz zachować Szerokość: 100 pikseli i Wysokość: 50 pikseli (tj. 2: 1) Po prostu zrób to:
źródło
Możesz użyć układu strumienia (FWD).
https://en.wikipedia.org/wiki/Adaptive_web_design
Skaluje i utrzymuje układ, jest nieco skomplikowany, ale pozwala na zmianę rozmiaru strony bez wypychania zawartości takiej jak (RWD).
Wygląda na responsywny, ale skaluje się. https://www.youtube.com/watch?v=xRcBMLI4jbg
Formułę skalowania CSS można znaleźć tutaj:
http://plugnedit.com/pnew/928-2/
źródło
Prosty sposób na zachowanie współczynnika kształtu za pomocą elementu canvas.
Spróbuj zmienić rozmiar div poniżej, aby zobaczyć go w akcji.
Dla mnie to podejście zadziałało najlepiej, dlatego dzielę się nim z innymi, aby również mogli z niego skorzystać.
Działa również z dynamiczną wysokością!
źródło
Użyłem nowego rozwiązania.
Do głównego współczynnika kształtu
Jest to jednak względne w stosunku do całej rzutni. Tak więc, jeśli potrzebujesz div, który jest 30% szerokości rzutni, możesz zamiast tego użyć 30vw, a ponieważ znasz szerokość, ponownie używasz ich na wysokości za pomocą jednostki calc i vw.
źródło
Niedawno otrzymaliśmy możliwość korzystania z tej
aspect-ratio
właściwości w CSS.https://twitter.com/Una/status/1260980901934137345/photo/1
Uwaga: Wsparcie nie jest jeszcze najlepsze ...
https://caniuse.com/#search=aspect-ratio
źródło
Jeśli cała struktura kontenera była oparta na wartościach procentowych, byłoby to zachowanie domyślne, czy możesz podać bardziej szczegółowy przykład?
Poniżej znajduje się przykład tego, co mam na myśli, jeśli cała twoja hierarchia nadrzędna była oparta na%, dowolne dostosowanie okna przeglądarki działałoby bez dodatkowego js / css, czy nie jest to możliwe w twoim układzie?
źródło