28112 sujets
CSS et mise en forme, CSS3
object-fit : contain;Le problème de cette règle, c'est qu'elle n'est compatible avec aucune version d'Internet Explorer. En attendant je préfère me débrouiller avec d'autres techniques...
Une solution maison : CodePen
<div class="content-img">
<!-- on englobe l'image dans une div pour ne pas la distordre en tant que flexbox item : -->
<div>
<img src="https://image.jpg"/>
</div>
</div>.content-img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
img {
max-width: 100%;
max-height: 100vh;
}Modifié par Olivier C (20 Jan 2017 - 08:28)