• Le mieux 4

    Sans doute la dernière page sur ce sujet !

    Nous avons vu que l'unité vw correspond à 1% de la largeur de l'écran de lecture et que nous pouvons utiliser cette unité pour déterminer largeur et hauteur d'un élément.

    Nous avons vu que, pour une photo, au ratio 16/9 (par exemple), indiquer seulement la largeur permet au programme d'en déduire la hauteur (ou inversement) puisqu'il connaît le rapport entre largeur et hauteur:16/9.

    Où ça se corse, c'est sur un paragraphe, qui peut contenir une image en fond ou un texte: les dimensions sont à votre choix.

    Pas trop compliqué tout de même, si vous conservez le ratio 16/9:

    _ un paragraphe horizontal fera 16vw par 9vw, avec tous les multiples et sous-multiples possibles.

    _ un paragraphe vertical fera 9vw par 16vw ... idem !

    Chaque cadre représente une zone article, qui mesurerait environ 1000px de large, mais en adaptatif.

    Chacun de ces cadres s'affiche en 55% (55vw) de la largeur de l'écran de lecture, quelle qu'en soit la résolution.

     

    le code.
    <div style="width: 55vw; height: 32vw; border: 0.3vw solid black; margin: 1vh auto;">
    <p style="float: left; width: 18vw; height: 32vw; background: url('http://ekladata.com/i-HuJFGTGC1IbnTmKVfE_F0gss0.jpg'); background-size: 18vw 32vw;">&nbsp;</p>
    <p style="float: left; width: 37vw; height: 16vw; text-align: center; font-size: 1vw; background: #FAEBD7;">le code.<br />...</p>
    <p style="float: left; width: 37vw; height: 16vw; margin: -0.5vw 0 0 0; text-align: center; font-size: 1vw; background: #7FFFD4;">la suite.<br />...</p>
    </div>

    la suite.
    L'image en fond, au format vertical 18vw/32vw, remplit le cadre.
    Le premier paragraphe texte remplit le reste de la zone en largeur et la moitié, en hauteur.
    Le second paragraphe texte, se place dessous et, pour compenser l'écart automatique entre 2 paragraphes, remonte de 0.5vw par margin.
    Cette disposition n'est qu'un exemple de remplissage de votre zone article avec une image et zones texte.
    L'inconvénient est que l'écriture doit se faire en direct ou alors, de reprendre le code source (voir page précédente) en remplaçant les px par des vw.

     

    Le principe.
    <div style="width: 55vw; height: 32vw; border: 0.3vw solid black; margin: 1vh auto; background: url('http://ekladata.com/7MAnfpGMQCHZHIi_x4wrWimgfS8.jpg'); background-size: cover;">
    <p style="width: 35vw; height: 26vw; border: 0.2vw solid black; margin: 3vw 0 0 10vw; background: rgba(255,255,255,0.5); text-align: center; font-size: 1vw;">Le principe.<br />...</p>
    </div>
    Une image est placée en fond du cadre et une zone texte, à l'intérieur, avec fond semi-transparent.
    Ce montage est écrit directement en code source.

     

     

    Le principe.
    <div style="width: 55vw; height: 32vw; border: 0.3vw solid black; margin: 1vh auto; background: rgba(0,0,0,0.3);">
    <p style="width: 32vw; height: 18vw; border: 0.2vw solid white; border-radius: 2vw; margin: 1vw auto; background: url('http://ekladata.com/Qfc9wPFJ4J8P4Yyl0EC3l7bz7z8.jpg'); background-size: cover;">&nbsp;</p>
    <p style="height: 12vw; background: rgba(255,255,255,0.5); text-align: center; font-size: 1vw;">Le principe.<br />...</p></div>