การปรับขนาด HTML img

114

ฉันพยายามแสดงภาพขนาดใหญ่ด้วยแท็ก HTML img ในขณะที่พวกเขาออกจากขอบหน้าจอ ฉันจะปรับขนาดให้อยู่ในหน้าต่างเบราว์เซอร์ได้อย่างไร

หรือในกรณีที่เป็นไปไม่ได้อย่างน้อยก็สามารถพูดว่า "แสดงภาพนี้ที่ 50% ของความกว้างและความสูงปกติ" ได้หรือไม่

แอตทริบิวต์ความกว้างและความสูงทำให้รูปภาพบิดเบี้ยว - เท่าที่ฉันสามารถบอกได้นั่นเป็นเพราะมันอ้างถึงแอตทริบิวต์ใดก็ตามที่คอนเทนเนอร์อาจลงเอยด้วยซึ่งจะไม่เกี่ยวข้องกับรูปภาพ ฉันไม่สามารถระบุพิกเซลได้เนื่องจากฉันต้องจัดการกับภาพจำนวนมากซึ่งแต่ละภาพมีขนาดพิกเซลต่างกัน ความกว้างสูงสุดไม่ทำงาน

html image-scaling

— rwallace
แหล่งที่มา

4

โปรดทราบว่าไม่แนะนำให้ส่งภาพขนาดใหญ่และทำให้มีขนาดเล็กด้วย css ควรใช้รูปภาพเดียวกันในเวอร์ชันต่างๆเพื่อประหยัดแบนด์วิดท์และเพื่อให้เพจตอบสนองได้ดีขึ้น (แม้ว่ารูปภาพจะดูเล็ก แต่ก็จะส่งรูปภาพแบบเต็มไปด้วย)

— Esteban Küber

1

rwallace คุณใช้. net หรือ PHP หรืออย่างอื่นที่ไม่ใช่ HTML ล้วนๆ

— Dorjan

1

ขนาดไฟล์ภาพไม่สำคัญไม่มีข้อกำหนดในกรณีที่ฉันกำลังมองหาที่จะประหยัดด้วยแบนด์วิดท์ ฉันใช้ PHP แต่โซลูชัน HTML ใช้งานได้

— rwallace

135

ตั้งค่าwidthหรือheightและจะปรับขนาดโดยอัตโนมัติ และใช่คุณสามารถใช้เปอร์เซ็นต์

ส่วนแรกสามารถทำได้ แต่ต้องใช้ JavaScript ดังนั้นอาจใช้ไม่ได้กับผู้ใช้ทุกคน

— RiddlerDev
แหล่งที่มา

7

โปรดทราบว่าการทำเช่นนี้กับรูปภาพขนาดใหญ่จะส่งผลให้ต้องใช้เวลาดาวน์โหลดนานสำหรับหน้าที่ไม่ควรใช้เวลาดาวน์โหลดนาน หากเป็นไปได้ควรปรับขนาดภาพให้ดีกว่าเสมอ

— ceejayoz

ขอบคุณ! ปรากฎว่าโซลูชันของคุณมีเพียงการตั้งค่าความกว้างไม่เพียง แต่ใช้ได้กับการปรับขนาดที่ถูกต้องเท่านั้น แต่ยังทำส่วนแรกด้วยการตั้งค่าความกว้างเป็น 100%

— rwallace

2

@ceejayoz ฉันเห็นด้วย แต่นั่นไม่ใช่สิ่งที่เขาถาม

— RiddlerDev

@ceejayoz ฉันสงสัยทำไมใช้เวลานานกว่านี้? ไม่ต้องปรับขนาดเมื่อแสดงสำหรับทั้งสองสถานการณ์หรือไม่? หรือคุณกำลังบอกว่าปรับขนาดภาพจริงด้วยตนเองแล้วเปลี่ยนไฟล์?

— อับดุล

2

@Abdul ฉันกำลังบอกว่าไม่ควรใช้รูปภาพขนาด 5MB 3,000x3,000 พิกเซลในสล็อต 100x100 พิกเซลในเว็บไซต์ของคุณ

— ceejayoz

18

css ก็เพียงพอแล้ว:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

— Selvadurai Handeeban
แหล่งที่มา

9

ฉันรู้ว่าคำถามนี้ถูกถามมานานแล้ว แต่ ณ วันนี้คำตอบง่ายๆคือ:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

การใช้vwในที่นี้บอกว่าความกว้างสัมพันธ์กับ 55% ของความกว้างของวิวพอร์ต

ปัจจุบันเบราว์เซอร์หลัก ๆ ทั้งหมดรองรับสิ่งนี้

ตรวจสอบลิงค์นี้

— ดิมิทรีเดอพระเยซู
แหล่งที่มา

1

vwเป็นเครื่องช่วยชีวิตสำหรับฉันวิธีอื่นไม่ได้ผลกับภาพที่อยู่ในมือ

— caram

6

ไม่จำเป็นต้องใช้ Javascript

IE6 Internet Explorer 6

เปอร์เซ็นต์ใช้ได้กับความกว้างขององค์ประกอบเท่านั้น แต่height:100%;จะใช้ไม่ได้หากไม่มีรหัสที่ถูกต้อง

CSS

html, body { height:100%; }

จากนั้นการใช้เปอร์เซ็นต์จะทำงานได้อย่างถูกต้องและอัปเดตการปรับขนาดหน้าต่างแบบไดนามิก

<img src="image.jpg" style="height:80%;">

คุณไม่จำเป็นต้องมีแอตทริบิวต์ width ความกว้างจะปรับขนาดตามสัดส่วนเมื่อขนาดหน้าต่างเบราว์เซอร์เปลี่ยนไป

และอัญมณีเล็ก ๆ นี้ในกรณีที่ภาพถูกปรับขนาดขึ้นมันจะไม่ดู (มากเกินไป) บล็อก (มันสอดแทรก)

img { -ms-interpolation-mode: bicubic; }

อุปกรณ์ประกอบฉากไปที่แหล่งข้อมูลนี้: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs

— ไม่ปรากฏชื่อ-1
แหล่งที่มา

6

เพิ่มmax-width: 100%;ไปยังimgแท็กทำงานสำหรับฉัน

— ราล์ฟเดวิดอเบอร์นาธี
แหล่งที่มา

2

ฉันคิดว่าทางออกที่ดีที่สุดคือปรับขนาดรูปภาพผ่านสคริปต์หรือในเครื่องแล้วอัปโหลดอีกครั้ง อย่าลืมว่าคุณกำลังบังคับให้ผู้ชมดาวน์โหลดไฟล์ขนาดใหญ่กว่าที่ต้องการ

— riotera
แหล่งที่มา

0

วิธีที่ดีที่สุดที่ฉันรู้วิธีทำคือ:

1) ตั้งค่าโอเวอร์โฟลว์เพื่อเลื่อนและวิธีนั้นรูปภาพจะยังคงอยู่ แต่คุณสามารถเลื่อนเพื่อดูแทนได้

2) อัปโหลดภาพขนาดเล็ก ตอนนี้มีโปรแกรมมากมายให้อัปโหลด (คุณจะต้องมีบางอย่างเช่น PHP หรือ. net เพื่อทำสิ่งนี้ btw) คุณสามารถปรับขนาดอัตโนมัติได้

3) ใช้ชีวิตร่วมกับมันและตั้งค่าความกว้างและความสูงแม้ว่าจะทำให้ดูผิดเพี้ยนไป แต่ขนาดที่เหมาะสมก็ยังส่งผลให้ผู้ใช้ต้องดาวน์โหลดภาพขนาดเต็ม

โชคดี!

— Dorjan
แหล่งที่มา