Je veux montrer une image à partir d'une URL avec une certaine largeur et hauteur même si elle a un rapport de taille différent. Je veux donc redimensionner (en maintenant le rapport), puis couper l'image à la taille que je veux.
Je peux redimensionner avec la img
propriété html et je peux couper avec background-image
.
Comment puis-je faire les deux?
Exemple:
Cette image:
A la taille des 800x600
pixels et je veux montrer comme une image de 200x100
pixels
Avec img
je peux redimensionner l'image 200x150px
:
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
Cela me donne ceci:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">
Et avec background-image
je peux couper les 200x100
pixels de l'image .
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Donne moi:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
Comment puis-je faire les deux?
Redimensionner l'image puis la couper à la taille souhaitée?