• A votre pourcentage /1

    Je propose des codes de montages html/CSS en unités adaptatives et à 80% de la largeur de l'écran de lecture car ma page de blog n'a pas de colonne latérale et je dispose donc de 100% de la largeur pour mes articles.

    Je sais que cela déstabilise certain(e)s mais nous allons regarder comment adapter un code image puis montage à la dimension que vous avez choisie; en fait de dimension, ce sera le % de l'écran, compatible avec la largeur de votre zone article.

    Ainsi, votre article représentera le même % de l'écran , quelle que soit la résolution de l'écran de lecture.

    Commençons simplement par une image: une image ayant une largeur et une hauteur définie, en définissant une de ces dimensions, le programme calculera automatiquement l'autre.

    Mes images sont hébergées en 1920x1080px, au rapport 16/9 mais les vôtres peuvent être de tout autre dimension et de tout autre rapport.

    <img style="width:80vw;" src="http://ekladata.com/CkigFjQ8lGlQgYiB-YYqJL1eOUI.jpg">

    Si vous souhaitez une image de moitié: <img style="width: 40vw;" src="http://ekladata.com/CkigFjQ8lGlQgYiB-YYqJL1eOUI.jpg" alt="" />

    Puisque les dimensions adaptatives n'ont qu'une valeur relative (=% de l'écran), nous ne pouvons faire de comparatif entre px et vw/vh.
    Cependant, si une valeur de 800px représente la moitié de la largeur de votre écran, l'équivalent sera, pour tout écran:width:50vw;
    Il vous faudra définir les valeurs adaptées à vos pages de blog et les reprendre pour chaque nouvel article.


    Voyons ce que cela donne sur une image placée en fond de cadre, comme c'est souvent le cas des montages.

    Une boîte n'ayant pas de largeur ni de hauteur définies, il vous faudra indiquer les deux.

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

    Nous indiquons la largeur et la hauteur de la boîte (rapport 16/9) et également la taille de l'image placée en fond.

    Ainsi, n'importe quelle image, de n'importe quel format, va s'adapter aux valeurs que vous aurez définies.

     

    De la même façon que nous avons modifié la taille d'une image seule, nous allons modifier la taille de la boîte et de son image de fond; il y a 2 endroits à modifier:

    <p style="width:40vw; height:46vh; margin:2vh auto; background:url('http://ekladata.com/OXGHb9vZsN2Ni3aRGo0Qg3Rl3Pc.jpg'); background-size:40vw 46vh;">&nbsp;</p>

     

    Dès lors que l'on sait intervenir dans le code source d'un article, ce genre d'écriture ne me semble pas très compliquée; si on se trompe, l'image n'apparaît pas ou déformée: pas d'autre risque !

    Je vais préparer une page avec un code montage, en 80vw/92vh que nous modifierons en 40vw/46vh.