• 27.04.2024

    Pour me faciliter l'écriture des codes, j'utilise souvent des images au ratio 16/9 et horizontales.

    Le ratio des vôtres impose les dimensions du cadre et de modifier mon code en 820x450px. (800px + 20px de curseur latéral).

    Cependant, vous pouvez mélanger des images horizontales et verticales, comme dans l'exemple ci-dessous: défilement à la molette de souris ou curseur latéral.


    <div style="width:820px; height:450px; border:4px solid white; background:bisque; box-shadow:4px 4px 8px black; margin:50px auto; overflow:auto;">
    <img class="flw" src="http://ekladata.com/rZn6vTaPtCnoUw87SAaMnhnxhBw.jpg">
    <img class="flw" src="http://ekladata.com/XyAektoR0d_-Y4TRZFeO3dHDwRk.jpg">
    <img class="Vflw" src="http://ekladata.com/I2sLSLGYn7WQgJYL6-bdMtrxgA8.jpg">
    <img class="flw" src="http://ekladata.com/1BOX8VAp7T-1PTUkLpR6ncAkuSo.jpg">
    <img class="Vflw" src="http://ekladata.com/24XppwnRitNoQsTvbvOnwrPSalU.jpg">
    <img class="flw" src="http://ekladata.com/f6Q9jN-Cj8qnr13_DiPa9fNzkfw.jpg">
    <img class="Vflw" src="http://ekladata.com/V5gKbVPM9KHcyiXQT5Qnu1msXNw.jpg">
    <img class="flw" src="http://ekladata.com/4v7kagNIvSgjaDXfDs6XHGZlfpw.jpg">
    <img class="flw" src="http://ekladata.com/SFqOlWg4Nmoda819gxNBUypG2TY.jpg">
    </div>

    <style><!--
    .flw{position:relative; width:800px; height:450px;}
    .Vflw{position:relative; width:253px; height:450px; margin:auto;}
    --></style>