HTML/CSS

HTML/CSS: Images

11 mai 2022
BenjaminViguier

Toujours mettre chaque image dans une <div> pour manipuler sans déformer

Exemple1:

3 images alignées, prenant la largeur de la page

cadrephoto -> nom de la div contenant chaque photo

.cadrephoto {
  flex: 1;
  max-height: 300px;
  overflow: hidden;
  
}
.cadrephoto img {
  width: 100%;
 
}
.cadrephoto:nth-child(2) {
  margin: 0 20px;
}
  • La taille limite est donnée au cadre (<div> « cadrephoto ») -> ici max height: 300px
  • L’image remplit 100% de sa <div>
  • overflow:hidden -> toute partie de photo dépassant des limites du cadre est cachée.
  • flex:1 donne la même valeur de ‘flex’ a chaque cadre: equilibre des photos dans la page. (si on veut une photo plus grande, on lui met une valeur ‘flex’ plus grande.
  • le 2eme enfant correspondant à la <div> ‘cadrephoto’ aura une marge gauche et droite de valeur 20px (pour créer des séparations entre les photos, sans marges à gauche ou à droite du container)

Résultat:

Sans le overflow:hidden :

Sans le width:100% :

Sans les marges gauche et droite sur la deuxième photo :

Exemple 2:

.portrait {
  position: relative;
  top: -100px;
}
.portrait img {
  border-radius: 100%;
  object-fit: cover;
  max-width: 300px;
  min-height: 300px;
}


<div class="portrait">
            <img
              src="./images/portrait/beautiful-serious-young-african-american-woman-2021-08-26-15-38-07-utc.jpg"
              alt="Portrait de l'artiste"
            />
          </div>

BACKGROUND IMAGE

Possible de mettre plusieurs images dans le même background.

https://developer.mozilla.org/fr/docs/Web/CSS/background-image

Effet parallaxe:
background attachment: fixed

https://www.w3schools.com/howto/howto_css_parallax.asp

https://developer.mozilla.org/fr/docs/Web/CSS/background-attachment

CLIP PATH : masque et crop de photos

https://developer.mozilla.org/fr/docs/Web/CSS/clip-path