• Taille image

    Nous pouvons publier une image, dans une dimension adaptative et centrée dans la page de blog, de deux façons au moins.

    Les photos de cette page sont hébergées sur Ekla en 1980x1080px.

    Dans la première façon, l'adresse de l'image est placée dans un paragraphe qui centre ce qu'il contient text-align:center; et l'image est paramétrée avec une largeur de 80%: style="width:80%;"

    <p style="text-align: center;"><img style="width: 80%;" src="http://ekladata.com/fQ2Dfmydv2Tre9BJPrLpQm4Jxh8.jpg" alt="" /></p>

    La hauteur est calculée automatiquement pas le programme en fonction du rapport largeur/hauteur de l'image.

     

    Dans la seconde façon, nous plaçons l'image en fond de paragraphe, dont nous déterminons les dimensions et indiquons que l'image doit remplir le paragraphe (background-size:cover;)

    <p style="width: 80vw; height: 90vh; margin: 0px auto; background: url('http://ekladata.com/UCnSby8WWowq2fHyx8sXV35Ssj4.jpg'); background-size: 80vw 90vh;">&nbsp;</p>

    Pour une raison que je ne comprends pas, pour garder le ratio 16/9 de ces photos, il faut w:80vw et h:90vh ! Désolé !

     

    Pour essayer de comprendre, voici une troisième photo, publiée en 60vw et 75vh !

     

     

    <p style="width: 60vw; height: 75vh; border: 0.1vw solid black; border-radius: 50%; box-shadow: inset 4px 4px 15px black, inset -4px -4px 10px white, 4px 4px 10px black; margin: 0px auto; background: url('http://ekladata.com/WDOGAC9PGaJyGxxUlSITRxeVPYE.jpg'); background-size: cover;">&nbsp;</p>