Obtenir image homothétique dans un slider.
lamontange
Messages postés
130
Date d'inscription
Statut
Membre
Dernière intervention
-
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Tout est dans l'intitulé :)
Je vous donne le code complet du slider :
Les images sont rognées à droite, ou en bas selon la taille de la fenêtre, plutôt que de se réduire homothétiquement.
J'ai tenté beaucoup d"e choses en CSS... sans succès.
Alors...
Bonne fin de week-end !
E.
Tout est dans l'intitulé :)
Je vous donne le code complet du slider :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
</head>
<style>
.slideshow {
list-style-type: none;
}
/** SLIDESHOW **/
.slideshow,
.slideshow:after {
top: -16px; /*Not sure why I needed this fix*/
position: fixed;
width: 100%;
height: 100%;
left: 0px;
z-index: 0;
}
.slideshow li span {
position: absolute;
width: 50%;
height: 50%;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 30s linear infinite 0s;
}
.slideshow li:nth-child(1) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
}
.slideshow li:nth-child(2) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9ecd82b40364fc97f4b_bridge.jpg");
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5bfa14d04ae3429879830ee4_home-hero.jpg");
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url("https://uploads-ssl.webflow.com/5976a3655fcd654cb3d604ca/5c00c9963ea913260bb41b0e_powerlines.jpg");
animation-delay: 24s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
</style>
<body>
<ul class="slideshow">
<li><span></span></li>
<li><span>2</span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</body>
</html>
Les images sont rognées à droite, ou en bas selon la taille de la fenêtre, plutôt que de se réduire homothétiquement.
J'ai tenté beaucoup d"e choses en CSS... sans succès.
Alors...
Bonne fin de week-end !
E.
Configuration: Macintosh / Chrome 101.0.4951.41
A voir également:
- Obtenir image homothétique dans un slider.
- Image iso - Guide
- Obtenir windows 10 gratuitement - Accueil - Mise à jour
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
3 réponses
Bonjour,
Pour définir le ratio d'affichage des éléments, tu peux utiliser un padding-top spécifique sur le conteneur avec les éléments enfants en position absolute :
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Ou plus simplement utiliser directement la nouvelle propriété css aspect-ratio :
https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio
Pour définir le ratio d'affichage des éléments, tu peux utiliser un padding-top spécifique sur le conteneur avec les éléments enfants en position absolute :
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
Ou plus simplement utiliser directement la nouvelle propriété css aspect-ratio :
https://developer.mozilla.org/fr/docs/Web/CSS/aspect-ratio
Bonjour Pitet,
SUPER, c'est ce que je voulais faire, mais cela ne fonctionne pas :/
Mais merci :)
LM
SUPER, c'est ce que je voulais faire, mais cela ne fonctionne pas :/
Mais merci :)
LM
Difficile de voir ce qui ne fonctionne pas sans voir ce que tu as essayé ;)
Sur tes slides (.slideshow li span), tu peux ajouter la propriété aspect-ratio avec le ratio correspondant à tes images (par exemple 16/9) et supprimer la propriété height puisque la hauteur sera définie par le ratio en fonction de la largeur du slide.
Sur tes slides (.slideshow li span), tu peux ajouter la propriété aspect-ratio avec le ratio correspondant à tes images (par exemple 16/9) et supprimer la propriété height puisque la hauteur sera définie par le ratio en fonction de la largeur du slide.
.slideshow li span {
position: absolute;
aspect-ratio: 16/9;
width: 50%;
top: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
animation: imageAnimation 30s linear infinite 0s;
}