HTML -- height as a percentage of the width for iframe

Question

I have an embedded sketchfab viewer on the page and want to keep an aspect ratio of 3/2. So as an example if the Height=300px the width = 200px. The width needs to be percentage based (100% of div) and the height calculated as a percentage of the generated width.

Random guess: height:(66% of width); similar to height:(same as width);

is there a way of doing this?

Answer 1

See Sathran's answer here: Height equal to dynamic width (CSS fluid layout)

The HTML:

<div class="model-box">
<iframe class="model" src="https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec/embed" frameborder="0" allowfullscreen=""></iframe>
</div>

The CSS:

.model-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   66.6%; /* This is your aspect ratio */ }

.model {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    100%;
  height:   100%
}

Answer 2

This can be done by just CSS.

If you want to keep aspect-ratio I suggest adjusting padding-top percentages relative to the width %.

Demo here

Adjust accordingly until you find a suitable solution for yourself.