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:
Modifié par fanny95 (22 Oct 2015 - 04:06)
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)