vw jednostki:

Można używać jednostek vw zarówno dla szerokość i wysokość elementu. Pozwala to na zachowanie proporcji elementu w oparciu o szerokość widoku.

Vw: 1 / 100. szerokość wizjera. [MDN]

Alternatywnie, możesz również użyć vh dla wysokości widoku, a nawet vmin/vmax aby użyć mniejszego / większego z wymiarów widoków (dyskusja tutaj ).

Przykład: proporcje 1: 1

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

Dla innych proporcji, możesz użyć poniższej tabeli, aby obliczyć wartość wysokości zgodnie z szerokością elementu:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Przykład: siatka kwadratowa 4x4

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Oto Fiddle z tego demo i tutaj jest rozwiązanie, aby responsywna siatka kwadratów z pionowo i poziomo wyśrodkowane content .

Obsługa przeglądarki dla jednostek vh / vw to IE9+ zobacz canIuse aby uzyskać więcej informacji

Znalazłem sposób, aby to zrobić za pomocą CSS, ale musisz być ostrożny, ponieważ może się to zmienić w zależności od przepływu własnej strony internetowej. Zrobiłem to w celu osadzenia wideo ze stałym współczynnikiem proporcji w części płynnej szerokości mojej strony internetowej.

Powiedz, że masz osadzony film jak ten:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Możesz umieścić to wszystko w div z klasą "wideo". Ta klasa wideo prawdopodobnie będzie elementem płynnym w Twojej witrynie, tak że sama w sobie nie ma bezpośredniej wysokości ograniczenia, ale po zmianie rozmiaru przeglądarki zmieni się Szerokość w zależności od przepływu strony internetowej. Byłby to element, w którym prawdopodobnie próbujesz umieścić osadzone wideo, zachowując pewien współczynnik proporcji wideo.

Aby to zrobić, umieszczam obraz przed osadzonym obiektem w klasie "Video" div.

!!! Ważne jest to, że obraz ma prawidłowe proporcje, które chcesz zachować. Upewnij się również, że rozmiar obrazu jest na Co najmniej tak duże, jak najmniejsze, oczekujesz, że wideo (lub cokolwiek, co utrzymujesz A. R.) 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 3px na 2px. Może to działać w pewnych okolicznościach, ale nie testowałem go i prawdopodobnie dobrym pomysłem byłoby uniknąć.

Prawdopodobnie powinieneś już mieć minimalną szerokość jak ten zdefiniowany dla płynnych elementów twojej strony internetowej. Jeśli nie, dobrze jest to zrobić, aby uniknąć odcinania elementów lub nakładania się, gdy okno przeglądarki staje się zbyt małe. Lepiej jest mieć pasek przewijania w pewnym momencie. Najmniejsza szerokość strony internetowej powinna wynosić około ~600px (w tym kolumny o stałej szerokości), ponieważ rozdzielczości ekranu nie są mniejsze, chyba że masz do czynienia z witrynami przyjaznymi dla telefonów. !!!

Używam całkowicie przezroczystego png, ale nie myśl, że to ma znaczenie, jeśli zrobisz to dobrze. Tak:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Teraz powinieneś być w stanie dodać CSS podobny do następującego:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Upewnij się, że usuniesz także wszelkie jawne deklaracje wysokości lub szerokości wewnątrz obiektu oraz znaczniki osadzania, które zazwyczaj zawierają skopiowany/wklejony kod osadzania.

Sposób działania zależy od właściwości pozycji elementu klasy wideo, a element, który chcesz mieć, zachowuje określony współczynnik proporcji. Wykorzystuje sposób obraz zachowuje swój odpowiedni współczynnik proporcji po zmianie rozmiaru w elemencie. Mówi to, co jeszcze jest w elemencie klasy wideo, aby w pełni wykorzystać nieruchomość zapewnioną przez dynamiczny obraz, wymuszając jego szerokość/wysokość do 100% elementu klasy wideo jest regulowany przez obraz.

Być może będziesz musiał się nim trochę pobawić, aby mógł działać z twoim własnym projektem, ale to naprawdę działa zaskakująco dobrze dla mnie. Istnieje ogólna koncepcja.

Aby dodać do odpowiedzi Web_Designer, <div> będzie miała wysokość (w całości składającą się z dolnej wyściółki) 75% szerokości zawierającego element. Oto dobre podsumowanie: http://mattsnider.com/css-using-percent-for-margin-and-padding / . Nie wiem, dlaczego tak powinno być, ale tak właśnie jest.

Jeśli chcesz, aby twój div miał szerokość inną niż 100%, potrzebujesz innego owijania div, na którym ustawisz szerokość:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Użyłem czegoś podobnego do Elliota sztuczka z obrazkami, która pozwoliła mi na użycie zapytań CSS do obsługi innego pliku logo w zależności od rozdzielczości urządzenia, ale nadal skaluj proporcjonalnie jako <img> naturalnie (ustawiłem logo jako obraz tła na przezroczysty .png z prawidłowym współczynnikiem proporcji). Ale rozwiązanie Web_designera zapisałoby mi żądanie http.

Elliot zainspirował mnie do tego rozwiązania-dzięki:

aspectratio.png jest to całkowicie przezroczysty plik PNG o rozmiarze preferowanego proporcji, w moim przypadku 30x10 pikseli.

HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Uwaga: background-size jest to funkcja css3, która może nie działać z przeglądarkami docelowymi. Możesz sprawdzić interoperacyjność (np. na caniuse.com).

Jak podano w tutaj na w3schools.com i nieco powtórzone w tej zaakceptowanej odpowiedzi , padding wartości jako procenty (podkreślenie moje):

Określa wypełnienie w procentach szerokości zawierającego element

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Demo na JSFiddle

Bazując na Twoich rozwiązaniach zrobiłem jakiś trick:

Kiedy go używasz, Twój HTML będzie tylko

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Aby użyć go w ten sposób make: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

I js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

I mając to wystarczy ustawić attr data-keep-ratio na wysokość / szerokość i tyle.

Możesz użyć svg. Ustaw pozycję kontenera / owijarki względną, najpierw ustaw plik svg jako statycznie ustawiony, a następnie Ustaw absolutnie ustawioną zawartość (top: 0; left:0; right:0; bottom:0;)

Przykład z proporcjami 16: 9:

Obraz.svg: (może być inlined w src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Zauważ, że inline svg nie wydaje się działać, ale możesz urlencode svg i osadzić go w atrybucie img src w następujący sposób:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Jako @ web-tiki już pokazują sposób użycia vh/vw, potrzebuję też sposobu na wyśrodkowanie na ekranie, oto fragment kodu dla 9:16 portret.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY utrzyma to centrum na ekranie. calc(100vw * 16 / 9) to oczekiwana wysokość 9/16.(100vw * 16 / 9 - 100vh) jest wysokością przelewu, więc podciągnięcie overflow height/2 utrzyma środek na ekranie.

Dla krajobrazu, i zachować 16:9, pokazujesz użycie

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Współczynnik 9/16 jest łatwy do zmiany, nie ma potrzeby predefiniowania 100:56.25 lub 100:75.Jeśli aby zapewnić wysokość, należy najpierw zmienić szerokość i wysokość, np. height:100vh;width: calc(100vh * 9 / 16) dla portretu o 9:16.

Jeśli chcesz dostosować do różnych rozmiarów ekranu, Możesz również zainteresować

• background-size cover / contain
  • powyższy styl jest podobny do contain, zależy od stosunku szerokości do wysokości.
• dopasowanie obiektu
  • okładka / zawierać dla IMG / tag wideo
• @media (orientation: portrait)/@media (orientation: landscape)
  • Zapytanie o Media portrait/landscape aby zmienić stosunek.

SCSS jest najlepszym rozwiązaniem w moim przypadku; użycie atrybutu danych:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Na przykład:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

Źródło

Powiedzmy, że masz 2 divy, zewnętrzny div jest kontenerem, a wewnętrzny może być dowolnym elementem, który jest potrzebny do zachowania jego proporcji (img lub YouTube iframe lub cokolwiek)

Html wygląda tak:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

Powiedzmy, że musisz zachować stosunek "elementu"

Stosunek = > 4 do 1 lub 2 do 1 ...

Css wygląda tak

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

Wyściółka gdy podana jest w%, jest obliczana na podstawie szerokości, a nie wysokości. .. więc w zasadzie ty nie ma znaczenia co twoja szerokość to wysokość będzie zawsze obliczana na podstawie tego . co utrzyma proporcje .

To tylko pomysł albo włamanie.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Natknąłem się na ten problem już kilka razy, więc zrobiłem dla niego rozwiązanie JS. To w zasadzie dostosowuje wysokość domelementu zgodnie z szerokością elementu przez określony stosunek. Można go używać w następujący sposób:

<div ratio="4x3"></div>

Należy pamiętać, że ponieważ ustawia Wysokość elementu, element powinien być display:block lub display:inline-block.

Https://github.com/JeffreyArts/html-ratio-component

Podczas gdy większość odpowiedzi jest bardzo fajna, większość z nich wymaga poprawnego rozmiaru obrazu... Inne rozwiązania działają tylko na szerokość i nie dbają o dostępną wysokość, ale czasami chcesz dopasować zawartość do określonej wysokości.

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

Zauważ, że użyłem dużych wartości w atrybutach width i height SVG, ponieważ musi on być większy niż maksymalny oczekiwany rozmiar, ponieważ może się tylko kurczyć. Przykład sprawia, że współczynnik div 10: 5

Jeśli chcesz zmieścić kwadrat wewnątrz widoku w widoku pionowym lub poziomym( tak duży, jak to możliwe, ale nic nie wystaje na zewnątrz), Przełącz między użyciem vw/vh na Orientację portrait/landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

Jest to poprawa na zaakceptowaną odpowiedź:

• używa pseudo elementów zamiast wrappera divs
• współczynnik proporcji jest oparty na szerokości pudełka zamiast jego rodzica
• pudełko rozciągnie się pionowo, gdy zawartość stanie się wyższa

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Możesz użyć układu flux (FWD).

Https://en.wikipedia.org/wiki/Adaptive_web_design

Będzie skalować i utrzymywać układ, jest nieco skomplikowany, ale pozwala na zmianę rozmiaru strony bez popychania zawartości jak (RWD).

Wygląda na responsywny, ale jest skalowany. https://www.youtube.com/watch?v=xRcBMLI4jbg

Możesz znaleźć formułę skalowania CSS tutaj:

Http://plugnedit.com/pnew/928-2/

Jeśli cała struktura kontenera była oparta na procentach, byłoby to domyślne zachowanie, czy możesz podać bardziej konkretny przykład?

Poniżej znajduje się przykład tego, co mam na myśli, jeśli cała hierarchia nadrzędna była oparta na%, każda Regulacja okna przeglądarki działałaby bez dodatkowego JS / css, czy nie jest to możliwe z twoim układem?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

Użyłem nowego rozwiązania.

.squares{
  width: 30vw
  height: 30vw

Do main aspect ratio

.aspect-ratio
  width: 10vw
  height: 10vh

Jest to jednak w stosunku do całego widoku. Tak więc, jeśli potrzebujesz div, który stanowi 30% szerokości viewportu, możesz użyć zamiast tego 30vw, a ponieważ znasz szerokość, możesz ponownie użyć ich w wysokości za pomocą calc i jednostki vw.