هنوز چند بایت مونده که پیدا کنم...

div ریسپانسیو با حفظ نسبت طول و عرض

با در نظر داشتن این ویژگی عالی سی اس اس که padding-top رو اگر درصد بدیم متناسب با width آبجکت خواهد بود این تکه کد نوشته شده.
 
توجه کنید که نسبت 16 به 9 در این مثال هست که padding-top مقداری معادل 52.25 درصد گرفته. و اینکه واسه wrapper هر عرضی خواستید میتونید بدید جای 100%
.wrapper {
  width: 100%;
  display: block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: red;
  color: white;
}

نکته

Responsive div with aspect ratio
نویسنده : محمد ملک مکان
دوشنبه 25 آبان 1394
+ 30 -

خوشحال میشیم نظرتُ بدونیم