• Selection

    On veut parfois ne conserver qu'une partie d'une image, pour l'afficher dans une dimension choisie; pour cela, des logiciels de traitement d'images font ça très bien et il y a différentes façons de le faire en code html5/CSS3; en voici une.

    Ma photo est dimensionnée en 1000x563px et je voudrais n'afficher que la partie dans le rectangle blanc, tout en utilisant l'adresse de la grande image:

     

    La zone choisie fait 400x300px (rapport 4/3) et je ne vais afficher que cette partie de la grande image dans cette dimension.

     

    Code
    <div id="sel1">&nbsp;</div>
    <style><!--
    #sel1{width:400px; height:300px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/06/DSCN5519.JPG'); background-position:12% 50%; border:4px solid white;}
    --></style>
    ..
    L'attribut background-position va déterminer quelle partie vous sélectionnez, par les valeurs H% et V%.
    Les unités peuvent être d'autres que % mais ce sont celles qui fonctionnent le mieux chez moi !


    En utilisant ce principe, on peut laisser la sélection sur la grande image et l'agrandir au survol, par exemple.