Responsively Change Div Size Keeping Aspect Ratio

Maintain the aspect ratio of a div with CSS

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>

Responsively change div size keeping aspect ratio

You can do this using pure CSS; no JavaScript needed. This utilizes the (somewhat counterintuitive) fact that padding-top percentages are relative to the containing block's width. Here's an example:

.wrapper {  width: 50%;  /* whatever width you want */  display: inline-block;  position: relative;}.wrapper:after {  padding-top: 56.25%;  /* 16:9 ratio */  display: block;  content: '';}.main {  position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;  /* fill parent */  background-color: deepskyblue;  /* let's see it! */  color: white;}

<div class="wrapper">  <div class="main">    This is your div with the specified aspect ratio.  </div></div>

How to make div element auto-resize maintaining aspect ratio?

The aspect-ratio ^ref property has a good support now so you can use the below:

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  background: 
    /* this gradient is a proof that the ratio is maintained since the angle is fixed */
    linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

<div class="stage">
  <p>Some text</p>
</div>

Keep aspect ratio of div. while using max-width

You could apply the padding-bottom to its ::before pseudoelement, e.g.

.some-class {
  width: 100%;
  max-width: 520px;
  border: 1px #9bc solid;
}
.some-class::before {
   padding-bottom: 100%;
   content: "";
   display: inline-block;
   vertical-align: top;
}

demo

Doing so the padding is always computed relatively to the actual width of the div and not to the width of its ancestor (e.g. the body element)

Update (05/2021)

On recent browsers you could start using the new aspect-ratio property, so if the browser supports it you could simply write

.some-class {
  width: 100%;
  max-width: 520px;
  border: 1px #9bc solid;
  aspect-ratio: 1;
}

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Maintain the aspect ratio of a div with CSS

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>

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

To ensure the box keeps its aspect ratio but never overflows the viewport (which has been specified as width not exceeding 90vw and height not exceeding 90vh) CSS can calculate the best fit:

.box {
  display: inline-block;
  --ratio: calc( 3 / 2);
  /* put the aspect ratio width to height you want */
  --h: min(calc(90vw / var(--ratio)), 90vh);
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
  background-color: red;
}

<div class="box"></div>

Responsively Change Div Size Keeping Aspect Ratio

Maintain the aspect ratio of a div with CSS

Responsively change div size keeping aspect ratio

How to make div element auto-resize maintaining aspect ratio?

Keep aspect ratio of div. while using max-width

CSS force image resize and keep aspect ratio

Maintain the aspect ratio of a div with CSS

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

Related Topics

Leave a reply