CODEWITHSUNDEEP
htmlcssheightwidth
WordCent
WordCent

Reputation: 727

Handling width and height of Images and Media in/through CSS (set the height = 200% of the width)

suppose for a Media, which is a Vimeo Video the width is set to 100%, but If I set auto for height than the height comes out to be too low.

Later, I set a height of 500px for the Video/Media but is there a way so that I can set a height of 200% of the width.

<iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Upvotes: 0

Views: 44

Answers (2)

Rahul
Rahul

Reputation: 42

You can use vw units for the width and height of the element. This allows to keep the element's aspect ratio according to the viewport width (Note : you can also see vh if you need to keep aspect ratio according to viewport height).

<iframe src="https://player.vimeo.com/video/113657402" width="10vw" height="20vw" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Try this, height: 56.25vw; will maintain 16:9 Aspect Ratio

.wrapper {
  position: relative;
  height: 56.25vw;
  width: 100%;
  margin: 0 auto;
}

.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

Upvotes: 1

Related Questions