Dimension d'une image dans un conteneur

Bonjour
Pouvais vous m'aider svp. Je souhaiterai une image qui garde sa proportion (ne soit pas ecrasé) soit en hauteur soit en largeur pour remplir entièrement le contenant (en étant coupé et éventuellement centrer) .. mais je n'arrive pas a l'appliquer avec la background-size cover.
pour le moment j'arrive soit qu'elle soit ok en hauteur mais une partie vide en largeur ou inversement ou bien super étirée.
Je précise que je ne peux pas mettre l'image dans le css car je récupère l'image en php.

<section class="project">
 <section class="dim">
  <img  class="content-image" src="monimage.jpg" alt="">
 </section>
</section>

.project {
    position: relative;
    margin: auto;
    overflow: hidden;
    
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}
.dim{
    height: 550px;
    width: 100%;
  }
.content-image {
    height: 100%;
    background-size: cover;
  }

merci
Modifié par didiweby (05 Dec 2019 - 14:21)

Bonjour,

background-size fonctionne pour les images de fond uniquement. Note que tu peux tout de même insérer ton image en fond avec du css inline comme ceci :

<div style="background-image: image.jpg"></div>

Maintenant est-ce que tu veux faire cela ? Ça dépend de l'importance de ton image niveau SEO/accessibilité. Si c'est une image d'illustration pour un produit par exemple tu veux plutôt utiliser la balise img.

Pour les images insérées avec la balise img tu as clip : https://developer.mozilla.org/fr/docs/Web/CSS/clip
Aussi, il est souvent préférable de découper tes images préalablement comme il faut côté serveur. Avec ImageMagick, par exemple, si tu utilises php.
Modifié par bacasable (06 Dec 2019 - 08:41)

Hello,

As-tu essayé la propriété css " object-fit : cover " sur ton img ?

Je crois que c'est l'effet que tu recherches

^ En effet c'est ce qu'il faut utiliser plutôt que clip