powiedz, że chcesz umieścić stronę CSS-Tricks w<iframe>. Zrobiłbyś to tak:
<iframe src="https://css-tricks.com"></iframe>bez żadnej innej stylizacji otrzymałbyś prostokąt o rozmiarze 300×150 pikseli. Tego nie ma nawet w arkuszu stylów User Agent, to po prostu magiczna rzecz o ramkach iframe (i obiektach). Prawie na pewno nie tego chcesz, więc często zobaczysz atrybuty szerokości i wysokości bezpośrednio na samym iframe (YouTube to robi).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>te atrybuty dobrze mieć., To początek w kierunku zarezerwowania miejsca dla iframe, który jest o wiele bliższy temu, jak ma się skończyć. Pamiętaj, layout jank jest zły. Ale mamy więcej pracy, ponieważ są to stałe liczby, a nie przyjazna dla reakcji konfiguracja.
najlepszą sztuczką dla responsywnych ramek iframe, na razie, jest tworzenie pudełka o proporcjach. Najpierw potrzebujesz elementu nadrzędnego z pozycjonowaniem względnym. Ramka iframe jest elementem potomnym wewnątrz niej, do którego stosuje się bezwzględne pozycjonowanie w celu wypełnienia obszaru., Najtrudniejsze jest to, że element nadrzędny staje się idealną wysokością, tworząc pseudo-element, aby popchnąć go do tej wysokości w oparciu o współczynnik proporcji. Chodzi o to, że popychanie elementu do odpowiedniego rozmiaru jest ładniejszym systemem niż wymuszanie pewnej wysokości. W scenariuszu, w którym zawartość wewnątrz jest wyższa niż współczynnik proporcji, nadal może rosnąć, a nie przepełnić.
Po prostu umieszczę pełne demo tutaj (które działa również dla obrazów):
Zobacz pióro
Responsive Iframe autorstwa Chrisa coyiera (@chriscoyier)
na CodePen.,
za każdym razem, gdy mamy do czynienia z proporcjami, myślę o przyszłości z lepszą obsługą. Istnieje eksperymentalnyintrinsicsize atrybut, który mógłbym sobie wyobrazić jako całkiem miły dla ramek iFrame oprócz obrazów. Do tego mamy nadzieję, że wkrótce aspect-ratiow CSS i pomysł, że może domyślnie używać atrybutówwidthIheight na elemencie, który mam nadzieję rozszerzy się na iframes.