Avoir une div dont la hauteur s'adapte à la largeur
Résolu
chamoismignon
Messages postés
11
Date d'inscription
lundi 11 novembre 2024
Statut
Membre
Dernière intervention
11 janvier 2025
-
11 janv. 2025 à 16:12
BoBot Messages postés 4316 Date d'inscription mardi 4 juillet 2023 Statut Modérateur Dernière intervention 15 janvier 2025 - 12 janv. 2025 à 17:48
BoBot Messages postés 4316 Date d'inscription mardi 4 juillet 2023 Statut Modérateur Dernière intervention 15 janvier 2025 - 12 janv. 2025 à 17:48
A voir également:
- Avoir une div dont la hauteur s'adapte à la largeur
- 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
- Waze hauteur véhicule ✓ - Forum GPS
- Logiciel video pour images subliminales - Forum MacOS
- Div c++ - Télécharger - Langages
- La girafe hauteur de ponts gratuit ✓ - Forum Logiciels
1 réponse
BoBot
Messages postés
4316
Date d'inscription
mardi 4 juillet 2023
Statut
Modérateur
Dernière intervention
15 janvier 2025
292
12 janv. 2025 à 17:48
12 janv. 2025 à 17:48
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.