Adaptive image stretching - with a grid based on the y axis?

Question

I bite my teeth at something that seems very simple to me - theoretically.

Think of the regular sensitive mesh that we use every day, like in bootstrap, foundation, etc. Then rotate it 90 degrees:

The gray container is an enlarged image with a known aspect ratio (3: 2). A blue container represents a known number of square images (thumbs) that are ideal for a large image. The pink frame is the container that received a fixed height (for example, 50vh html,body{height:100vh} ). All images have one side at 100% and one on the car.

Thus, the “gray” image should stretch to its container, and then the thumbs should follow. Indeed, the classic behavior of RWD is only along the y axis.

I tried:

• Flexbox (not calling it here, does not help with aspect ratio support when stretching parent containers)
• A classic grid that calculates the required column width in% (theoretically designed, but rounding the browser will lead to irregularities)
• display: table (100% height does not drive in, and there are no rows trying to nest them, terribly)
• Yes tables! (It was not possible to get the main image to stretch based on its aspect ratio, and, of course, you won’t be able to put your thumbs for the small screen)

So, back to the beginning: is it possible to reproduce this style behavior at all height: 100%, width: auto using pure HTML / CSS?

If so, which way?

If not, why, and what do you recommend as a JS workaround?

PS I already tried the base of an equalizer script, again: rounding errors when calculating height.

PPS: I admit that I tried most of the above with the bootable Zurb Foundation 6 (since I would like to stick with it for other parts of the page), so maybe this has interfered with some attempts?

Answer 1

As suggested above, you can play with padding and a height of 0, read this article at https://stackoverflow.com/editing-helprticle http://www.mademyday.de/css-height-equals-width-with-pure -css.html , I checked the test too, hope this is what you are looking for, check 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>