28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,
Voila, je me hurte a un probleme en ce moment et je ne sais comment le resoudre :

J'ai une div contenant une image afin qu'elle ai le ratio de celle-ci. Mais lors de la redimension de ma fenetre, evidemment, l'image garde son ratio donc ne s'etends pas a toute la div. De ce fait, existe-t-il une maniere afin que mon image occupe toujours toute la div (donc en css avec la propriete background-size:cover) ?

Merci de votre aide.
Cas concret ici
Code:
<div class="container centre" id="line1">
        <section class="image">
            <img src="<?= _IMG.'show/Show.jpg' ?>" />
        </section>
        <section class="texte">
            <h2>Titre</h2>
            <hr />
            <p>Texte</p>
        </section>
    </div>

.centre { width:80%; margin:0 auto; }
.container { display:block;
-webkit-flex-direction:row; flex-direction:row;
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
-webkit-justify-content:space-between; justify-content:space-between;
-webkit-align-items:stretch; align-items:stretch; }
section.texte { padding:38px 50px; -webkit-box-flex:1; -moz-box-flex:1;width:20%;-webkit-flex:1;-ms-flex:1;flex:1; }
section.image { width:auto; background:#3d3d3d; overflow:hidden; }
section.image img { display:table; width:100%; height:auto; }
#page_show #line1 section.image { width:330px; }

Modifié par fanny95 (22 Oct 2015 - 04:06)
Salut Smiley smile

en faite, le conteneur de ton image section, n'a pas de hauteur, donc l'image s'adapte forcément, il faut fixer cela.
Modifié par JENCAL (22 Oct 2015 - 09:57)