JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<p>How to keep Div size in fluid layout witout using padding etc</p>

<div class="box">
  
  <p>Keeping Aspect ratio</p>
  
  
</div>


<div class="box2">
  
  <p>Keeping Aspect ratio</p>
  
  
</div>

CSS

div{
  float:left;
  padding:10px;


}

.box {
  
  max-width:10%;
  margin:10px 10px 10px 30%;
  background:pink;
  border:4px solid #000;
  border-radius:10px;
  
}

.box2 {
  
  max-width:20%;
  margin:10px 10px 10px 5%;
  background:gold;
  border:4px solid #000;
  border-radius:10px;
  
}


p { 
  
  text-align:center;
 margin:5px;
  font-size:2rem;
  color:#000;
  
}

JavaScript

// Set aspect ratio of .box
var aspect_ratio = 1

// Store the jQuery object for future reference
var $box = jQuery(".box");

// Initial resize of .box
jQuery(document).ready(function($) {
$box.height( $box.width() * aspect_ratio );
});

// Resize .box on browser resize
jQuery(window).resize(function() {
  $box.height( $box.width() * aspect_ratio );
});

// Let's resize another one.

var aspect_ratio_box2 = 0.6


var $box2 = jQuery(".box2");


jQuery(document).ready(function($) {
$box2.height( $box2.width() * aspect_ratio_box2 );
});


jQuery(window).resize(function() {
  $box2.height( $box2.width() * aspect_ratio_box2 );
});