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
دوشنبه 25 آبان 1394