Obtenir image homothétique dans un slider.

Fermé

lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - Modifié le 3 mai 2022 à 18:51
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 4 mai 2022 à 04:02

Bonjour,
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
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide
Faststone image viewer - Télécharger - Visionnage & Diaporama
Obtenir windows 10 gratuitement - Guide

3 réponses

Réponse 1 / 3

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
2 mai 2022 à 12:37

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

Réponse 2 / 3

lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
2 mai 2022 à 13:05

Bonjour Pitet,
SUPER, c'est ce que je voulais faire, mais cela ne fonctionne pas :/
Mais merci :)
LM

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
3 mai 2022 à 18:50

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.

.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;
}

Réponse 3 / 3

lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
4 mai 2022 à 04:02

Bonjour Pitet,
Oui, c'est bien le ration et il faut jouer avec le padding-bottom (56.25% pour du 16/9).
Merci beaucoup, bonne journée,
LM

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

code couleur associé a une image

retrouver un texte caché dans une image jpg

Discussions similaires

Newsletters