New solution (2022) CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid : The grid property to handle the grid layout (MDN reference) The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference) The object-fit property … Read more
Works on almost all browsers. You can try giving padding-bottom as a percentage. <div style=”height:0;width:20%;padding-bottom:20%;background-color:red”> <div> Content goes here </div> </div> The outer div is making a square and inner div contains the content. This solution worked for me many times. Here’s a jsfiddle
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; } <p>This image is originally 400×400 pixels, but should get resized by the CSS:</p> <img width=”400″ height=”400″ src=”http://i.stack.imgur.com/aEEkn.png”> This will make image shrink if it’s too big for specified area (as downside, it will not enlarge image).
Just create a wrapper <div> with a percentage value for padding-bottom, like this: .demoWrapper { padding: 10px; background: white; box-sizing: border-box; resize: horizontal; border: 1px dashed; overflow: auto; max-width: 100%; height: calc(100vh – 16px); } div { width: 100%; padding-bottom: 75%; background: gold; /** <– For the demo **/ } <div class=”demoWrapper”> <div></div> </div> It … Read more