• Centrage sujet

    Une question me demande comment centrer le sujet d'une image dans un cadre.

    En général, nous prenons nos photos avec le sujet principal centré mais il arrive que ce sujet ne soit pas center et que nous voudrions, soit le faire apparaître au centre du cadre, soit zoomer sur lui. 

    Pour cela, nous avons plusieurs solutions:

    Soit placer notre image, dans un cadre à la dimension choisie et positionner l'image dedans, en paramétrant ce cadre pour cacher ce qui en dépasse.

    Soit placer l'image en fond de cadre et positionner le fond pour que le sujet soit centré.

    Soit, faire un sélection sur notre image en centrant cette sélection sur le sujet choisi.

    Soit sans doute d'autres façons mais...

    Pour le zoom sur l'image de fond avec choix du point de référence, j'ai déjà publié quelques pages là-dessus.

    Voici l'image exemple:

    Essayons la centrer sur le pin.

    <div style="width: 40vw; height: 25vw;">
    <div style="position: relative; width: 40vw; height: 25vw; overflow: hidden;"><img style="transform: translate(-10vw,-5vw); width: 80vw;" src="http://ekladata.com/YDFPHqv1WcVFv79hZk8DAdGSM-s.jpg" alt="" /></div>

    L'image est assez grande pour rester nette (width:80vw;) et est positionnée (transform:translate(-10vw,-5vw); pour s'afficher en étant décalée vers la gauche et vers le haut.
     
    <div style="width: 40vw; height: 25vw; background: url('http://ekladata.com/YDFPHqv1WcVFv79hZk8DAdGSM-s.jpg'); background-size: 80vw 45vw; background-position: -10vw -5vw;">&nbsp;</div>

    L'image est placée en fond de cadre, dimensionnée (background-size:80vw 45vw); et positionnée (background-position:-10vw -5vw;) en fonction du résultat attendu.
    clip
    <div style="position: relative; width: 40vw; height: 25vw; margin: -5vw 0 0 -10vw;"><img id="nic" src="http://ekladata.com/YDFPHqv1WcVFv79hZk8DAdGSM-s.jpg" alt="clip" /></div>
    <style><!--
    #nic{position:absolute; width:80vw; height:45vw; clip: rect(5vw, 50vw, 30vw, 10vw); }
    --></style>

    Peut-être pas la solution la plus simple car les valeurs de clip et de positionnement sont délicates.