فرض کنید چندین تگ img یا video داریم که هر کدام عکس هایی با اسکیل های متفاوت دارند ولی می خواهیم عرض و ارتفاع تگ img برای همه یکسان باشد. چطور بدون اینکه عکس هایمان کشیده و نامرتب شوند، اسکیل آن ها را ثابت نگه داریم؟
- نفیسه افقی 2 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
با کمک پراپرتی object-fit
می توانید این کار را انجام دهید. اگر مقدار آن را cover
بگذارید، اسکیل یا نسبت طول و عرض عکس تغییر نمیکند و در نتیجه کشیده یا فشرده نمی شود:
.post-container {
width: 400px;
height: 400px;
}
.post-image {
width: 100%;
height: 100%;
object-fit: cover;
}
*در اینجا post-container
تگی است (مثلا div) که دربردارنده img
است (طول و عرضی که می خواهیم همه عکس ها داشته باشند را اینجا می دهیم)
*با تعریف width: 100%
و height: 100%
و object-fit: cover
عکس های ما همگی نسبت یکسان خواهند داشت و کشیده نمی شوند.
- نفیسه افقی 2 سال قبل پاسخ داد
- شما باید برای ارسال دیدگاه وارد شوید