Responsywne rozciąganie obrazu - z siatką opartą na osi Y?

Question

Ugryzam zęby w coś, co wydaje mi się dość podstawowe - teoretycznie.

Pomyśl o regularnym reagującego siatki, którego używamy na co dzień, jak w bootstrap, fundacja itp ... Następnie obrócić go o 90 stopni:

Szary pojemnik jest powiększony obraz ze znanym współczynnikiem proporcji (3: 2). Niebieski pojemnik to znana liczba kwadratowych obrazów (kciuki), które idealnie pasują do dużego obrazu. Różowa ramka to pojemnik, który otrzymał stałą wysokość (np. 50vh z html,body{height:100vh}). Wszystkie obrazy mają jedną stronę na 100% i jedną na auto.

Tak więc "szary" obraz powinien rozciągnąć się do jego pojemnika, a następnie kciuki powinny nastąpić. Naprawdę, klasyczne zachowanie RWD - tylko na osi Y.

Próbowałem:

• schematu flexbox (nie wezwanie tutaj, nie pomaga przy współczynniku kształtu podczas rozciągania-konserwacji pojemników dominująca)
• Klasyczna siatka, obliczanie niezbędnej szerokości kolumny w% (działa w teorii, ale zaokrąglenie przeglądarka spowoduje nieprawidłowości)
• display: table (100% wysokości nie kopać, i nie ma rowspan, starał się gniazdo nich straszne)
• Tak, tabele! (Nie można uzyskać rozciągnięcia głównego obrazu na podstawie jego proporcji i oczywiście nie będzie możliwe układanie kciuków na małym ekranie)

Wracając do początku: czy możliwe jest wszystko, aby odtworzyć to zachowanie stylu height: 100%, width: auto z czystym HTML/CSS?

Jeśli tak, którą drogą wybrać?

Jeśli nie, dlaczego i co polecacie jako obejście JS?

PS Już próbowałem skryptu fundacji equalizer, ponownie: błędy zaokrąglania przy obliczaniu wysokości.

PPS: Przyznaję, że wypróbowałem większość z powyższych przy załadowanym fundamencie zurb 6 (tak, jakbym chciał się do niego przyczepić dla innych części strony), więc może przeszkodziło to w niektórych próbach?

Answer 1

Jak sugerowano powyżej, można grać z wyściółką i wysokości 0, przeczytaj ten artykuł w https://stackoverflow.com/editing-helprticlehttp://www.mademyday.de/css-height-equals-width-with-pure-css.html zrobiłem test jak dobrze, nadzieja jest tym, czego szukasz, to sprawdzić http://codepen.io/wolfitoXtreme/pen/bEeYep

// CSS 
html { 
    height: 100%; 
} 

body, body * { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    box-sizing: border-box; 
} 

#container { 
    margin: 0 auto; 
    width: 50%; 
    height: 100%; 
    display: block; 
    position: relative; 
    background-color: #000000; 
} 
#container #imgMain { 
    padding-bottom: 75%; 
    width: 100%; 
    top: 50%; 
    left: -25%; 
    margin-top: -37.5%; 
    height: 0; 
    position: absolute; 
    background-color: #cccccc; 
} 
#container #imgMain figure { 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 
#container #imgMain img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
} 
#container #imgGrid { 
    top: 0; 
    right: -50%; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    z-index: 10; 
    background-color: #f0f0f0; 
} 
#container #imgGrid figure { 
    width: 50%; 
    height: 0; 
    padding-bottom: 37.5%; 
    position: relative; 
    float: left; 
} 

// HTML 
<div id="container"> 



     <div id="imgMain"> 

      <figure> 
       <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
      </figure> 

      <div id="imgGrid"> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic02.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic03.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic04.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic05.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic06.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic07.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic08.jpg"> 
       </figure> 

       <figure> 
        <img src="http://cssguy4hire.com/codePenAssets/aspectRatio/pic01.jpg"> 
       </figure> 

      </div> 

     </div> 




</div>