Pengguna mengunggah foto, dan ukuran foto tidak diketahui; perlu diperbesar secara proporsional. Seperti yang ditunjukkan di bawah ini.
Melihat, Anda dapat menggunakan Teks-Align: Center; Secara proporsi, atribut lebar dan tinggi yang menggunakan preset <img /> tidak dapat diselesaikan. Karena gambar pengguna mungkin sangat panjang atau sangat luas. Saya memikirkan hubungan mereka secara online, dan menilai bahwa ini adalah sebagai berikut:
if (lebar aktual> pratinjau lebar maksimum) {
Lebar penskalaan = pratinjau lebar maksimum
}
if (ketinggian sebenarnya> pratinjau tinggi maksimum) {
Tinggi penskalaan = pratinjau tinggi maksimum
}
Namun, akan ada masalah. Agar memungkinkannya proporsional, berbagai penilaian perlu dilakukan. Kemudian melanggar prinsip harapan kami untuk otomatisasi. Pikirkan lagi, meskipun Anda tidak suka matematika, tetapi matematika masih sangat berguna, harus ada cara lain. Karena diskalakan secara proporsional, mengapa tidak menggunakan proporsi gambar aktual dan lebar area pratinjau untuk menghitung hubungan mereka? Hmmmm ... sangat ok. Bahkan, kita hanya perlu memperbesar atau tinggi. Karena proporsinya hanya besar dan kecil. Secara khusus, tulis fungsi untuk mengimplementasikannya:
Salin kode kode sebagai berikut:
/**
* Gambar diperbesar dalam proporsi adaptif
* @param img {elemen} gambar yang diunggah oleh pengguna
* @param maxwidth {number} Lebar maksimum area pratinjau
* @param maxheight {angka} ketinggian maksimum area pratinjau
*/
Var resezeimg = fungsi (img, maxwidth, maxheight) {
var w = img.width,
h = img.head;
// Saat gambar tidak membuat perubahan apa pun dari jam area pratinjau
if (w <maxwidth && h <maxheight) kembali;
// Saat rasio gambar yang sebenarnya lebih besar dari proporsi lebar dan tinggi area pratinjau
// Lebar gambar penskalaan, sebaliknya penskalaan lebar gambar
w/h> maxwidth/maxheight?