Ich möchte ein Bild von einer URL mit einer bestimmten Breite und Höhe anzeigen, auch wenn es ein anderes Größenverhältnis hat. Ich möchte also die Größe ändern (unter Beibehaltung des Verhältnisses) und dann das Bild auf die gewünschte Größe zuschneiden.
Ich kann die Größe mit html ändern img Eigenschaft und ich kann mit background-image .
Wie kann ich beides tun?
Ejemplo:
Dieses Bild:
Hat die Größe 800x600 Pixel, und ich möchte ein Bild zeigen, das 200x100 Pixel
Mit img Ich kann die Größe des Bildes ändern 200x150px :
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">Daraus ergibt sich dies:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">Und mit background-image Ich kann das Bild ausschneiden 200x100 Pixel.
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>Das gibt mir:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>Wie kann ich beides tun?
Die Größe des Bildes ändern und es dann auf die gewünschte Größe schneiden?
