7

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?

Mudassir
  • 1,136
  • 1
  • 11
  • 29
Revada
  • 71
  • 1
  • 1
  • 2
  • Would be easily done with LESS or SASS but I'm afraid you have to calculate it by yourself... Or you try a JavaScript solution. – zerophreak Apr 10 '14 at 18:16
  • maybe a jquery solution? i was looking at this link: https://api.jquery.com/height/ – JasonBK Apr 10 '14 at 18:36

3 Answers3

10

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%
}
Community
  • 1
  • 1
PadreZippo
  • 186
  • 1
  • 8
1

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.

urbz
  • 2,663
  • 1
  • 19
  • 29
  • I've tried a couple of variation but cant get it to work. heres kind of the layout but i cant get the iframe to go to height 66%. http://jsfiddle.net/5tzk3/1008/ – Revada Apr 12 '14 at 15:44
-1

For your issue I suggest you to try this. It works for me.

<iframe style="position:absolute;height:100%;width:100%;border:none"></iframe>
Boris ZENYO
  • 11
  • 2