28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image responsive dans un conteneur GRID

Bonjour à tous,

Je suis devant un dilem. Il y a surement un truc qui m'a échappé, d’où ma demande. Je fais une présentation courte du sujet :

Un conteneur (ici header) en GRID qui contiendra "3col et 2rows" repartis sur 4 elements enfants. Le problème se situe à l'élement => "logo_1" et l'insertion d'une image responsive dans ce dernier. En effet, l'image inclus, ne s'adapte pas à son conteneur et dépasse par le bas.

J'ai donc créé un DIV en dehors du conteneur principale, et la pas de soucis, tout fonctionne. Quel peut être le soucis dans ce cas et comment le rétablir ?

Edit : j'ai testé => grid-auto-rows: minmax(100px, auto); Ce qui arrange le debordement, mais ne rends pas l'image responsive..

Je vous mets le bout de code. Merci

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.top{
    background: cornflowerblue;
    display:grid;   
    grid-template-rows: 100px 100px;
    grid-template-columns: 300px 1fr 300px;   
    grid-template-areas: 
    "t_soc t_nav t_logo"
    "t_login t_login t_logo"    
    ; 
}   
.logo_1{   
    grid-area: t_logo;
    width: 300px;
    height:auto;
}
.nav{   
    background: cornflowerblue;
    grid-area: t_nav;    
}
.sociaux{   
    background: rgb(187, 42, 163);
    grid-area: t_soc;    
}
.login{   
    background: rgb(34, 209, 18);
    grid-area: t_login;    
}

/***************/
.logo_2{
    margin: 150px 0 0 120px;
    border: 3px solid rgb(17, 235, 35);
    width: 300px;
    height: auto;
}




 <header class="top">
        <div class="logo_1"> <img src="img.jpg"> </div>         
        <div class="nav">Naviguation</div>
        <div class="login">Login</div>
        <div class="sociaux">sociaux</div>
    </header>

    <div class="logo_2">
        <img src="img.jpg"> 
    </div>

Modifié par gesualda (01 Feb 2022 - 16:58)
hello parsimonhi, j'ai déja essayé. J'ai quand même modifié =>
grid-template-rows: 100px 100px;

en 
grid-template-rows: 1fr 1fr;

Comme cela ils s'adapteront directement à l'élément parent (et l'image passe en responsive) Smiley smile
Mais toujours rien de concret pour le débordement du bas de l'image grrrr !
(Je joins une capture)
upload/1643741082-54-erreurcss.jpg

Merci de ton intervention
Modifié par gesualda (01 Feb 2022 - 19:44)
Modérateur
Bonjour,

Avec le code que tu as posté + max-height:100%; sur les images, ça me semble marcher parfaitement (fais le test). Ton problème semble ailleurs.

upload/1643743191-54900-capturedaeacran2022-02-01aa20.png

Amicalement,
Modifié par parsimonhi (01 Feb 2022 - 20:20)
c'est très étrange, j'avais pas encore rencontré ce type de problème.

En effet, avec max-height: 100% sur l'image cela permet de réduire le débord inférieur, (je l'avais mis sur le cnt (oups !).

Alors en fait, j'ai oublié de préciser que la hauteur totale du conteneur => header était de 200px c'est cela qui pose problème pour l'affichage de l'image.
Je regarde demain, merci de ton aide.

Amicalement,
Modérateur
Bonsoir, bonjour

Comme tu definie la taille de tes cellules, tu peut donner une taille de 0 en height et width à ton image, puis lui appliqué un min-width:100%; min-height:100% pour que ton image remplisse entierement la cellule qui lui est attribué. Comme Yordi te le suggére, object-fit va te permettre aussi de gérer l'affichage,( déformation, ratio,mise à l'echelle ou pas), dans sa balise .

cdt
Modifié par gcyrillus (04 Feb 2022 - 21:38)
Hello vous tous,

Merci de vos interventions. J'ai modifié plusieurs choses dont la hauteur du conteneur que j'ai transformé en "vh", donc plus de hauteur fixe, et mis en place vos conseils sur la manipulation sur les images. Visiblement le résultat est la.

Merci beaucoup de vos conseils
Cdt
Sujet clos
Aller à