ฉันต้องการแสดงรูปภาพจาก URL ที่มีความกว้างและความสูงแม้ว่ามันจะมีอัตราส่วนขนาดที่แตกต่างกัน ดังนั้นฉันต้องการปรับขนาด (รักษาอัตราส่วน) แล้วตัดภาพให้มีขนาดที่ฉันต้องการ
ฉันสามารถปรับขนาดด้วยimg
คุณสมบัติhtml และสามารถตัดbackground-image
ได้
ฉันจะทำทั้งสองอย่างได้อย่างไร
ตัวอย่าง:
ภาพนี้:
มี800x600
พิกเซลขนาดและฉันต้องการแสดงเช่นภาพ200x100
พิกเซล
ด้วยimg
ฉันสามารถปรับขนาดภาพ200x150px
:
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
ที่ให้ฉันนี้:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">
และด้วยbackground-image
ฉันสามารถตัดภาพ200x100
พิกเซล
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
ให้ฉัน:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
ฉันจะทำทั้งสองอย่างได้อย่างไร
ปรับขนาดภาพแล้วตัดตามขนาดที่ฉันต้องการหรือไม่