ក្នុងនាមជាអ្នកអភិវឌ្ឍន៍គេហទំព័រ អ្នកតែងតែឃើញខ្លួនអ្នកនៅក្នុងបញ្ហានៃការធ្វើការជាមួយធាតុ HTML ដែល - មិនដូចធាតុ img ជាឧទាហរណ៍ - មិនមានទំហំថេរ ឬសមាមាត្រថេរទេ។ ជាញឹកញាប់អ្នកចង់ធានាថាវត្ថុទាំងនេះមានឥរិយាបទឆ្លើយតប ប៉ុន្តែសមាមាត្ររវាងទទឹង និងកម្ពស់ត្រូវបានរក្សាទុក។ តាមលំនាំដើម CSS មិនផ្តល់ដំណោះស្រាយវិចារណញាណនៅទីនេះទេ។ ប៉ុន្តែដោយមានជំនួយពីទ្រព្យសម្បត្តិទ្រនាប់បញ្ឈរអ្នកអាចសម្រេចបាននូវគោលដៅរបស់អ្នក។
សូមលើកឧទាហរណ៍ប្រចាំថ្ងៃនៃរូបភាពអត្ថបទការ៉េ ដែលក្រាហ្វិករបស់វាមិនចាំបាច់ការ៉េ ប៉ុន្តែអ្វីដែលយើងចង់បង្ហាញជាមួយនឹងសមាមាត្រ 1: 1 ដោយគ្មានការប្រឹងប្រែងបន្ថែម ហើយសំខាន់ជាងនេះទៅទៀត ដោយគ្មានការបង្ខូចទ្រង់ទ្រាយ ដែលទទឹងរបស់វា (និងកម្ពស់ផងដែរ) គួរតែផ្លាស់ប្តូរដោយឆ្លើយតប។ ជាមួយនឹងកូដខាងក្រោមវាងាយស្រួលណាស់ក្នុងការធ្វើវាដោយប្រើ CSS ដោយមិនមានការសម្គាល់បន្ថែម:
1bc3a80de3db90cdf0535541236d95f2
ជាមួយលទ្ធផល:
ប៉ុន្តែហេតុអ្វីបានជាវាដំណើរការ និងរបៀបដែលសមាមាត្រទិដ្ឋភាពផ្សេងទៀតត្រូវបានបង្កើត? គន្លឹះនៃការនេះស្ថិតនៅក្នុងលក្ខណសម្បត្តិទ្រនាប់ ដែលបញ្ជាក់ក្នុងតម្លៃភាគរយគឺតែងតែផ្អែកលើតម្លៃមូលដ្ឋានដូចគ្នានឹង Width property (គឺជាទទឹងនៃធាតុមេ)។ នេះគឺជាក់ស្តែងសម្រាប់ padding-left និង padding-right, គួរឱ្យភ្ញាក់ផ្អើលសម្រាប់ padding-top និង padding-bottom ប៉ុន្តែមានប្រយោជន៍ខ្លាំងណាស់ក្នុងករណីនេះ។
ប្រសិនបើអ្នកចង់បានសមាមាត្រនៃ ១៦: ៩ ឧទាហរណ៍អ្នកជ្រើសរើសទទឹងតម្លៃ៖ ១០០% ចន្លោះទ្រនាប់ខាងក្រោម៖ ៥៦,២៥%; សមាមាត្រដែលយកសមាមាត្រមាសទៅក្នុងគណនីគឺទទឹង: ១០០% ចន្លោះទ្រនាប់បាត៖ ៦១,៨១%; អាចដឹងបាន។
ដោយមានជំនួយពី calc អ្នកអាចបញ្ជាក់សមាមាត្រសមាមាត្រដោយផ្ទាល់ឧទាហរណ៍សម្រាប់ 16: 9 ជាមួយទ្រនាប់បាត: calc (1 / (16/9) * 100%) ។ ប្រសិនបើធាតុមានធាតុជាប់គ្នាបន្ថែមទៀតធាតុកុមារត្រូវបានដាក់ជាដាច់ខាតដើម្បីទូទាត់សងសម្រាប់ទ្រនាប់នៃធាតុមេ។:
1bc3a80de3db90cdf0535541236d95f2
នេះនាំឱ្យមានលទ្ធផលដូចខាងក្រោម: