Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Mengubah Saiz Imej dengan CSS?

Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Mengubah Saiz Imej dengan CSS?

Susan Sarandon
Susan Sarandonasal
2024-12-21 16:29:10727semak imbas

How Can I Maintain Aspect Ratio When Resizing Images with CSS?

Memelihara Nisbah Aspek Semasa Saiz Semula Imej

Membetulkan percanggahan nisbah aspek dalam saiz semula imej boleh dicapai melalui pengubahsuaian CSS.

Kod HTML pada asalnya menentukan kedua-dua atribut lebar dan ketinggian untuk imej, yang mengatasi CSS peraturan. Untuk membenarkan CSS diutamakan, atribut ketinggian hendaklah dialih keluar.

Selain itu, sifat lebar maksimum dalam peraturan CSS mengehadkan lebar imej. Walau bagaimanapun, ketinggian tidak ditetapkan secara eksplisit. Untuk memastikan nisbah bidang dikekalkan, ketinggian juga harus dihadkan, tetapi dengan cara yang menghormati nisbah bidang asal.

Coretan yang disediakan mencadangkan penggunaan ciri CSS paparan: blok, lebar maksimum: 230px, maks -tinggi: 95px, lebar: auto, dan tinggi: auto. Tetapan ini membenarkan imej berkembang dalam kekangan lebar maks dan ketinggian maks sambil mengekalkan nisbah aspek asalnya. Oleh itu, imej akan mengubah saiz tanpa herotan atau pemangkasan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Mengubah Saiz Imej dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn