2017-08-01 2 views
0

Supposons un média, qui est un Vimeo Video la largeurest réglé sur 100%, mais si je définis auto pour la hauteur que la hauteur sort être trop bas.largeur de manutention et la hauteur des images et des médias dans/à travers CSS (régler la hauteur = 200% de la largeur)

Plus tard, je mets une hauteur de 500px pour la Vidéo/Médias mais est-il un moyen pour que je puisse définir une hauteur de 200% de la largeur.

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

Ajoutez ici votre code essayé. –

+0

J'ai ajouté le code, mais la question ou la perception du problème ne changera pratiquement pas le code. Les questions se résument à savoir si de tels arrangements existent en CSS ou non qui peuvent m'aider à réaliser ce que je veux. – somethingnow

Répondre

1

Essayez ceci, height: 56.25vw; maintiendra 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>

1

Vous pouvez utiliser des unités vw pour la largeur et la hauteur de l'élément. Cela permet de conserver les proportions de l'élément en fonction de la largeur de la fenêtre (Remarque: vous pouvez également voir si vous souhaitez conserver les proportions selon la hauteur de la fenêtre).

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