19
CSS แสดงรูปภาพที่ปรับขนาดและครอบตัด
ฉันต้องการแสดงรูปภาพจาก 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;">&nbsp;</div> ให้ฉัน: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ฉันจะทำทั้งสองอย่างได้อย่างไร ปรับขนาดภาพแล้วตัดตามขนาดที่ฉันต้องการหรือไม่
333
html
css
background-image
image