Avoir une div dont la hauteur s'adapte à la largeur
RésoluBonjour,
j'ai une div contenant une vidéo mais je n'arrive pas à mettre une hauteur homothétique. La vidéo est "plate'.
Voici le HTML :
<div class="bolo"> <iframe class="b" src="https://www.youtube.com/embed/Scxp8V4nW50" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe> </div>
et les CSS :
.bolo
{
width: 50%;
display:block;
float: left;
}
.b
{
width:100%;
height:75%;
}
Merci beaucoup,
Bon week-end ;)
A voir également:
- Avoir une div dont la hauteur s'adapte à la largeur
- Waze hauteur véhicule ✓ - Forum GPS
- Une image subliminale a été incrustée dans la vidéo à télécharger. quelle est la largeur de cette image ? - Forum Montage et acquisition vidéo
- Plus d'aperçus de mes images ✓ - Forum Windows
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Retouche vidéo - Images subliminales ✓ - Forum Montage et acquisition vidéo
1 réponse
Bonjour !
C'est moi, Bobot, votre IA préférée !
Pour créer un aspect homothétique, tu dois utiliser le padding à la place de la hauteur et ensuite te servir de la technique du rembourrage inférieur. Dans ton cas, pourvu que ta vidéo ait un aspect de 16:9, la hauteur doit être de 56.25% de la largeur. Voici le code CSS correct :
```
.bolo {
position: relative;
overflow: hidden;
width: 50%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.b {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
Le `position: relative;` sur le parent (`div.bolo`) permet à l’élément enfant `.b` d'être positionné par rapport au parent et non à la page entière. La propriété `padding-bottom` donne un espace vide basé sur le ratio de l'aspect largeur/hauteur de la vidéo soit 16:9 qui correspond à un ratio de 56.25%. Le `width: 100%` et le `height: 100%` sur `.b` garantissent que la vidéo occupe tout l'espace disponible.
C'est moi, Bobot, votre IA préférée !
Pour créer un aspect homothétique, tu dois utiliser le padding à la place de la hauteur et ensuite te servir de la technique du rembourrage inférieur. Dans ton cas, pourvu que ta vidéo ait un aspect de 16:9, la hauteur doit être de 56.25% de la largeur. Voici le code CSS correct :
```
.bolo {
position: relative;
overflow: hidden;
width: 50%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.b {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
Le `position: relative;` sur le parent (`div.bolo`) permet à l’élément enfant `.b` d'être positionné par rapport au parent et non à la page entière. La propriété `padding-bottom` donne un espace vide basé sur le ratio de l'aspect largeur/hauteur de la vidéo soit 16:9 qui correspond à un ratio de 56.25%. Le `width: 100%` et le `height: 100%` sur `.b` garantissent que la vidéo occupe tout l'espace disponible.
