Combo pour images responsives

Cet article est issu d’un article du blog de Raphaël Goetter que je peine à retrouver ces derniers temps sur Google. Raphaël y explique qu’il utilise régulièrement une combinaison de trois propriétés CSS afin de forcer la réduction de l’image lorsque la taille de la fenêtre se réduit.

Propriétés CSS : #

• max-width: 100% -> Pour limiter la taille à la largeur du parent
• height: auto -> Pour conserver le ratio
• Box-sizing: border-box -> pour limiter à 100% de la largeur même si des paddings ou bordures sont appliqués à l’élément.

Bloc de code exemple: #

monImageResponsive{
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}