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