• taille montage

    Une visiteuse me demande comment réduire mon dernier article, qui s'affiche en 80% de la largeur de l'écran de lecture, ce qui est trop grand pour la plupart des zones article.

    Reprenons le code du montage à survoler:

    <div style="width: 80vw; height: 45vw; margin: 2vh auto; border: 0.4vh solid white; box-shadow: 0.4vh 0.4vh 0.8vh black;"><img id="bm1" src="http://ekladata.com/BuEChNFlB6qJaJU1hYFuutINfqM.jpg" alt="" /> <img id="bm2" src="http://ekladata.com/xEyzdS8EEqgSv3ju0GTcgLOg0Ps.jpg" alt="" /></div>
    <style><!--
    #bm1{position:absolute; z-index:1; width:80vw;}
    #bm2{position:absolute; z-index:2; width:80vw; opacity:0; transition:all 1s linear;}
    #bm2:hover{opacity:1;}
    --></style>

    qui donne:

    Si vous souhaitez réduire à 40% de la largeur de votre écran, modifier les valeurs surlignées en jaune.

    <div style="width: 40vw; height: 22.5vw; margin: 2vh auto; border: 0.4vh solid white; box-shadow: 0.4vh 0.4vh 0.8vh black;"><img id="bmr1" src="http://ekladata.com/BuEChNFlB6qJaJU1hYFuutINfqM.jpg" alt="" /> <img id="bmr2" src="http://ekladata.com/xEyzdS8EEqgSv3ju0GTcgLOg0Ps.jpg" alt="" /></div>
    <style><!--
    #bmr1{position:absolute; z-index:1; width:40vw;}
    #bmr2{position:absolute; z-index:2; width:40vw; opacity:0; transition:all 1s linear;}
    #bmr2:hover{opacity:1;}
    --></style>