lundi 17 juillet 2017

HTML / CSS: Rogner (crop) une image facilement...

C'est plutôt du CSS (embarqué)...

On aimerait parfois rogner une image distante sur laquelle on ne peut malheureusement par agir directement puisqu'on n'en est pas propriétaire...


C'est le cas ci-dessous. Cette image représente la situation météorologique en Atlantique Tropical Nord (NOAA). Elle est dotée de larges marges en haut et en bas (on se demande bien pourquoi...). Cette image est dynamique, c'est à dire qu'elle change périodiquement.
Je lui ai mis une bordure pour qu'on visualise bien la marge. La taille de l'image originale est de 1720x1260 pixels. Ici, elle est redimensionnée à 640 px de largeur pour s'adapter à ce blog.


Jusqu'à présent, je bidouillais l'image via un iframe et des décalages (positionnements) pour cacher ces marges gênantes tant bien que mal. On peut aussi mettre l'image en background d'un tableau et là aussi jouer sur le positionnement. Inconvénients notables de ces solutions, l'image devient invisible dans un email (mon site météo propose en effet des abonnements par email) mais aussi, les décalages peuvent avoir parfois des effets inattendus sur le reste de la mise en page...





Mais j'ai trouvé bien plus simple!

Un container DIV avec la propriété overflow:hidden; (qui cache tout ce qui dépasse du container) et des marges du bas et du haut négatives pour l'image. En gras: les éléments les plus importants.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-120px; margin-top:-110px; width:640px; height: 469px;" /></div>

margin-left: auto; margin-right: auto; sert à centrer le container DIV et donc l'image. style="text-align:center; est donc peut-être superflu ici. Les largeurs du container et de l'image sont identiques. La hauteur de l'image n'a pas vraiment besoin d'être spécifiée (c'est automatique) mais c'est mieux de la déterminer (ici 469 px). Pour connaître la hauteur proportionnellement à la largeur, il suffit de télécharger puis d'éditer l'image dans une application graphique comme Gimp ou PhotoFiltre. Mais il y a d'autres solutions...


Et voilà! l'image rognée (cropped en Anglais), sans ses marges...




Ci-dessous, un arrangement un peu différent. L'image est recoupée aussi à gauche et à droite ce qui permet d'optimiser l'espace disponible et de zoomer (l'image de base est ici plus grande).

Seule grosse différence: margin-left: -120px (pas de margin-right) qui est aussi négative.

 <div style="text-align:center; width:640px; overflow:hidden; margin-left: auto; margin-right: auto; "><img src="http://www.opc.ncep.noaa.gov/UA/Atl_Tropics.gif" style="margin-bottom:-250px; margin-left:-120px; margin-top:-230px; width:1000px" /></div>




Dans les exemples précédents, il n'y a pas de possibilité d'insérer l'image dans un texte (image à gauche par exemple). Ci-dessous, un exemple avec un tableau pour contourner le problème. Mais il y a certainement d'autres solutions à base de DIV. À cogiter!



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus. 
Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio. 

Ci-dessous, le code:

<table align="center" border="0" cellpadding="0" cellspacing="10" style="width: 640px;"><tbody>
<tr>    <td style="width: 300px;">
<div style="overflow: hidden; text-align: left; width: 300px;">
<a href="http://www.ssd.noaa.gov/goes/east/pr/h5-mloop-avn.html" target="_blank"><img src="http://www.ssd.noaa.gov/goes/east/pr/avn.jpg" style="height: 480px; margin-bottom: -125px; margin-left: -305px; margin-right: -150px; margin-top: -110px; width: 720px;" title="Clic pour l'animation! Click to loop!" /></a></div>
</td>    <td style="text-align: left; vertical-align: middle;">
<span style="color: #666666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor sed ipsum id feugiat. Fusce blandit sem in suscipit lacinia. Quisque porttitor ac eros ut congue. Nulla quis eros posuere, sollicitudin mauris quis, imperdiet enim. Nunc sodales, orci nec ornare bibendum, ipsum diam fermentum turpis, eget finibus tellus justo sed nisi. Nunc consequat congue nulla. Etiam dapibus mauris at eleifend ultrices. Cras tempor iaculis enim id tempus.&nbsp;</span>
<span style="color: #666666;">Nam ultrices mauris mollis dolor rutrum congue. Nunc eu iaculis sapien.Vestibulum hendrerit elit justo, sit amet sodales velit mattis quis. Nulla ex est, viverra et arcu interdum, tincidunt finibus odio.&nbsp;</span></td>   </tr>
</tbody> </table>




Sources:

Openclassrooms.com/forum/sujet/rogner-une-image-sans-la-redimensionner (merci à Alban Cornuau)
NOAA (National Oceanic & Atmospheric Administration)
Mon site Météo: NBBCmeteo (Île de St Martin, Antilles Fr.)
Propriété CSS "overflow"


Aucun commentaire:

Enregistrer un commentaire