Theme
Primary Color
أكاديمية الزيرو

الدرس 19

حجم صورة الخلفية والفرق بين cover و contain

معنى أسماء العناصر والمصطلحات

المعنىStand ForName
حجم صورة الخلفيةbackground-size
تغطية المساحة بالكامل مع احتمال قص جزء من الصورةcover
إظهار الصورة كاملة داخل المساحةcontain

جهز صورة مستطيلة

حط صورة باسم landscape.jpg داخل learn-css/images تكون أبعادها مثلا 800 في 400 بكسل 

<div class="box">Background Size</div>

إظهار الصورة كاملة

.box {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  background-image: url("../images/landscape.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

الصورة هتظهر كاملة مع الحفاظ على نسبتها 

في المثال ده هتبقى 300 في 150 بكسل 

وهيفضل مكان فوق وتحت يظهر فيه لون الخلفية

الصورة تغطي المساحة كلها

background-size: cover;

بدل سطر الحجم بالسطر ده الصورة هتكبر لحد ما تغطي المربع كله مع الحفاظ على نسبتها 

جزء من الجانبين مش هيظهر لأن الصورة أفقية والعنصر مربع

عرض محدد وارتفاع تلقائي

background-size: 200px auto;

حددنا العرض 200 بكسل والقيمة auto بتخلي الارتفاع يتحسب مع الحفاظ على نسبة الصورة 

فهنا هيبقى 100 بكسل

عرض وارتفاع محددين

background-size: 200px 200px;

هنا فرضنا العرض والارتفاع فالصورة الأفقية هتتمدد لمربع وممكن شكلها يتشوه

جرب بنفسك

قارن contain و cover بنفس الصورة ونفس العنصر 

وشوف هل المطلوب عندك ظهور الصورة كاملة 

ولا تغطية المساحة كلها

آخر تعديل للدرس: