ผู้ใช้อัปโหลดรูปภาพและขนาดของภาพถ่ายไม่เป็นที่รู้จัก ต้องซูมตามสัดส่วน ดังที่แสดงด้านล่าง
เมื่อมองดูคุณสามารถใช้การจัดแนวข้อความ: ศูนย์; ในสัดส่วนแอตทริบิวต์ความกว้างและความสูงที่ใช้ PRESET <img /> ไม่สามารถแก้ไขได้ เพราะรูปภาพผู้ใช้อาจยาวมากหรือกว้างมาก ฉันคิดถึงความสัมพันธ์ของพวกเขาทางออนไลน์และตัดสินว่านี่เป็นดังนี้:
if (ความกว้างจริง> ดูตัวอย่างความกว้างสูงสุด) {
ความกว้างการปรับขนาด = ดูตัวอย่างความกว้างสูงสุด
-
if (ความสูงจริง> ดูตัวอย่างความสูงสูงสุด) {
ความสูงของการปรับสเกล = ดูตัวอย่างความสูงสูงสุด
-
อย่างไรก็ตามจะมีปัญหา เพื่อให้สามารถปรับขนาดได้ตามสัดส่วนจำเป็นต้องมีการตัดสินที่หลากหลาย จากนั้นมันก็เป็นการละเมิดหลักการของความหวังของเราในระบบอัตโนมัติ คิดอีกครั้งแม้ว่าคุณจะไม่ชอบคณิตศาสตร์ แต่คณิตศาสตร์ยังคงมีประโยชน์มาก แต่ก็ควรมีวิธีอื่น เนื่องจากมีการปรับสัดส่วนตามสัดส่วนทำไมไม่ใช้สัดส่วนของภาพจริงและความกว้างของพื้นที่แสดงตัวอย่างเพื่อคำนวณความสัมพันธ์ของพวกเขา? อืม ... โอเคจริงๆ ในความเป็นจริงเราต้องซูมความกว้างหรือความสูงเท่านั้น เพราะสัดส่วนมีขนาดใหญ่และเล็กเท่านั้น โดยเฉพาะเขียนฟังก์ชั่นเพื่อนำไปใช้:
คัดลอกรหัสรหัสดังนี้:
-
* ภาพถูกซูมในสัดส่วนแบบปรับตัว
* @param img {element} รูปภาพที่อัปโหลดโดยผู้ใช้
* @param MaxWidth {number} ความกว้างสูงสุดของพื้นที่แสดงตัวอย่าง
* @param maxheight {number} ความสูงสูงสุดของพื้นที่แสดงตัวอย่าง
-
var resizeimg = function (img, maxwidth, maxheight) {
var w = img.width
h = img.head;
// เมื่อภาพไม่เปลี่ยนแปลงใด ๆ มากกว่าชั่วโมงแสดงตัวอย่าง
if (w <maxwidth && h <maxheight) กลับ;
// เมื่ออัตราส่วนภาพจริงมากกว่าสัดส่วนของความกว้างและความสูงของพื้นที่แสดงตัวอย่าง
// การปรับความกว้างของภาพมิฉะนั้นการปรับความกว้างของภาพ
w/h> maxWidth/maxHeight?