Voglio mostrare un'immagine da un URL con una certa larghezza e altezza anche se ha un rapporto di dimensioni diverse. Quindi voglio ridimensionare (mantenendo il rapporto) e quindi tagliare l'immagine alla dimensione desiderata.
Posso ridimensionare con la img
proprietà HTML e posso tagliare con background-image
.
Come posso fare entrambe le cose?
Esempio:
Questa immagine:
Ha le dimensioni dei 800x600
pixel e voglio mostrare come un'immagine di 200x100
pixel
Con img
posso ridimensionare l'immagine 200x150px
:
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
Questo mi dà questo:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">
E con background-image
posso tagliare i 200x100
pixel dell'immagine .
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Mi da:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
Come posso fare entrambe le cose?
Ridimensionare l'immagine e quindi tagliarla nel modo desiderato?