Mam witrynę do złożenia, która ma stały współczynnik proporcji, w przybliżeniu 16:9
poziomy, jak wideo.
Chcę, aby był wyśrodkowany i rozszerzony, aby wypełnić dostępną szerokość i dostępną wysokość, ale nigdy nie powiększał się po obu stronach.
Na przykład:
- Wysoka i cienka strona miałaby treść rozciągającą się na całą szerokość, zachowując proporcjonalną wysokość.
- Krótka, szeroka strona miałaby treść rozciągającą się na całą wysokość, z proporcjonalną szerokością.
Patrzyłem na dwie metody:
- Użyj obrazu o odpowiednim współczynniku proporcji, aby rozwinąć kontener
div
, ale nie mogłem sprawić, by zachowywał się tak samo w głównych przeglądarkach. - Ustawienie proporcjonalnego wypełnienia dolnego, ale działa tylko w odniesieniu do szerokości i ignoruje wysokość. Po prostu powiększa się wraz z szerokością i wyświetla pionowe paski przewijania.
Wiem, że można by to łatwo zrobić za pomocą JS, ale chciałbym mieć czyste rozwiązanie CSS.
Jakieś pomysły?
html
css
responsive-design
aspect-ratio
Henry Gibson
źródło
źródło
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%
Odpowiedzi:
Użyj nowych jednostek rzutni CSS
vw
ivh
(szerokość rzutni / wysokość rzutni)SKRZYPCE
Zmień rozmiar w pionie i poziomie, a zobaczysz, że element zawsze wypełni maksymalny rozmiar widocznego obszaru bez zrywania proporcji i bez pasków przewijania!
(PURE) CSS
Pokaż fragment kodu
Jeśli chcesz użyć maksimum, powiedzmy, 90% szerokości i wysokości widoku: FIDDLE
Pokaż fragment kodu
Również obsługa przeglądarek jest całkiem dobra: IE9 +, FF, Chrome, Safari- caniuse
źródło
vh
,vw
,vmin
,vmax
). Istnieje jednak obejście , które używa zapytań o media do kierowania na urządzenia z iOS.Wystarczy przeformułować
Danield
odpowiedź w MNIEJSZEJ mieszance, do dalszego wykorzystania:źródło
Użyj zapytania o media CSS
@media
razem z jednostkami rzutni CSSvw
ivh
dostosuj do współczynnika proporcji widoku. Ma to tę zaletę, że aktualizuje również inne właściwościfont-size
.To skrzypce pokazuje stały współczynnik proporcji elementu div oraz tekst dokładnie pasujący do jego skali.
Rozmiar początkowy dotyczy pełnej szerokości:
Następnie, gdy rzutnia jest szersza niż wymagany współczynnik proporcji, przełącz na wysokość jako miarę podstawową:
Jest to bardzo podobne w duchu
max-width
imax-height
podejście @Danield, tylko bardziej elastyczne.źródło
Moje pierwotne pytanie dotyczyło tego, jak oba mają element o stałym aspekcie, ale aby dokładnie dopasować go do określonego kontenera, co sprawia, że jest trochę kłopotliwy. Jeśli po prostu chcesz, aby pojedynczy element zachował swoje proporcje, jest to o wiele łatwiejsze.
Najlepszą metodą, z jaką się spotkałem, jest podanie zerowej wysokości elementu, a następnie użycie procentowego wypełnienia dolnego, aby nadać mu wysokość. Wypełnienie procentowe jest zawsze proporcjonalne do szerokości elementu, a nie do jego wysokości, nawet jeśli jest to dopełnienie górne lub dolne.
Właściwości wypełnienia W3C
Używając więc, możesz nadać elementowi procentową szerokość, aby znalazł się w kontenerze, a następnie dopełnić, aby określić współczynnik proporcji lub innymi słowy, związek między jego szerokością a wysokością.
Zatem w powyższym przykładzie obiekt zajmuje 80% szerokości kontenera, a następnie jego wysokość to 56,25% tej wartości. Jeśli szerokość wynosiłaby 160 pikseli, to dolne wypełnienie, a zatem wysokość wyniosłaby 90 pikseli - aspekt 16: 9.
Drobny problem, który może nie stanowić dla ciebie problemu, polega na tym, że w twoim nowym obiekcie nie ma naturalnej przestrzeni. Jeśli chcesz na przykład umieścić jakiś tekst, a tekst musi mieć własne wartości dopełnienia, musisz dodać kontener do środka i określić tam właściwości.
Również jednostki vw i vh nie są obsługiwane w niektórych starszych przeglądarkach, więc zaakceptowana odpowiedź na moje pytanie może nie być dla Ciebie możliwa i być może będziesz musiał użyć czegoś więcej lo-fi.
źródło
Rozumiem, że prosiłeś o
CSS
konkretne rozwiązanie. Aby zachować proporcje, musisz podzielić wysokość przez żądany współczynnik proporcji. 16: 9 = 1,777777777778.Aby uzyskać prawidłową wysokość kontenera, należałoby podzielić bieżącą szerokość przez 1,777777777778. Ponieważ nie możesz sprawdzić
width
kontenera za pomocą samegoCSS
lub podzielenia przez procentCSS
, nie jest to możliwe bezJavaScript
(o mi wiadomo).Napisałem działający skrypt, który zachowa pożądane proporcje.
HTML
CSS
JavaScript
Możesz użyć
function
ponownie, jeśli chcesz wyświetlić coś innego z innym współczynnikiem za pomocąźródło
window.onresize
jest uruchamiany w momencie zmiany rozmiaru przeglądarki.W celu rozwiązania tego problemu określono teraz nową właściwość CSS:
object-fit
.http://docs.webplatform.org/wiki/css/properties/object-fit
Wciąż brakuje obsługi przeglądarek ( http://caniuse.com/#feat=object-fit ) - obecnie działa w pewnym stopniu w większości przeglądarek z wyjątkiem Microsoft - ale z czasem jest to dokładnie to, co było wymagane w przypadku tego pytania.
źródło
Odpowiedź Danielda jest dobra, ale można jej użyć tylko wtedy, gdy element div wypełnia cały widoczny obszar, lub używając trochę
calc
, można użyć, jeśli znana jest szerokość i wysokość innych treści w widocznym obszarze.Jednak łącząc
margin-bottom
trik z metodą opisaną w powyższej odpowiedzi, problem można sprowadzić do konieczności znajomości wysokości innych treści. Jest to przydatne, jeśli masz nagłówek o stałej wysokości, ale na przykład szerokość paska bocznego nie jest znana.Tutaj jest w jsfiddle przy użyciu scss , co sprawia, że jest bardziej oczywiste, skąd pochodzą wartości.
źródło
Opierając się na odpowiedzi Daniela , napisałem ten miks SASS z interpolacją (
#{}
) dla elementu iframe wideo z YouTube, który znajduje się w modalnym oknie dialogowym Bootstrap:Stosowanie:
HTML:
Spowoduje to wyświetlenie wideo bez tych czarnych części, które YouTube dodaje do elementu iframe, gdy szerokość lub wysokość nie jest proporcjonalna do wideo. Uwagi:
$sides-adjustment
to niewielka regulacja, aby skompensować niewielką część tych czarnych części widocznych po bokach;.modal-footer
;.modal-dialog
;.modal-header
.Po wielu testach teraz działa to bezbłędnie.
źródło
tutaj rozwiązanie oparte na rozwiązaniu @Danield, które działa nawet w obrębie div.
W tym przykładzie używam Angulara, ale mogę szybko przejść do vanilla JS lub innego frameworka.
Głównym pomysłem jest po prostu przeniesienie rozwiązania @Danield w pustej ramce iframe i skopiowanie wymiarów po zmianie rozmiaru okna iframe.
Ten element iframe musi pasować do wymiarów z elementem macierzystym.
https://stackblitz.com/edit/angular-aspect-ratio-by-iframe?file=src%2Findex.html
Oto kilka zrzutów ekranu:
źródło