max-width

با استفاده از ویژگی max-width می توان یک عرض حداکثر برای عناصر مشخص کرد.

زمانی که نمی خواهیم عرض عنصری از یک مقدار مشخصی بیشتر شود می توانیم با استفاده از این ویژگی آن مقدار را برای عنصر تعیین کنیم.

در مثال زیر عنصر عرض محتوای داخلش را گرفته است:

دو گرسنه هرگز سير نشوند: جوينده علم و جوينده مال. حضرت علی(ع)

حال اگر بخواهیم تا عرض عنصر بیشتر از 300 پیکسل نشود چه؟ کافی است بصورت زیر عمل کنیم:

 


.element {
  max-width: 300px;  
}

 

دو گرسنه هرگز سير نشوند: جوينده علم و جوينده مال. حضرت علی(ع)

با استفاده از ویژگی min-width و max-width می توان برای عرض یک عنصر محدوده تعیین کرد.

 

برای عناصر خطی مثل <a> و یا <span> ویژگی max-width هیچ تاثیری روی آنها نخواهد گذاشت. برای اینکه بتوان از طریق این ویژگی عرض اینگونه عناصر را کنترل کرد باید توسط ویژگی display این عناصر را از حالت خطی خارج کنیم. مثلا می توان display آنها را تبدیل به block و یا inline-block کرد.

 


span {
  display: inline-block;
  max-width: 100px;
}

 

 

مقادیر ویژگی max-width

 


max-width: <length> | <percentage> | inherit

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 


max-width: 100px;
max-width: 4rem;
max-width: 10vh;
max-width: 100cm;

 

 

مقدار درصدی

اگر از مقادیر درصدی استفاده کنیم مرورگر مقدار را نسبت به عرض نگهدارنده یا همان پدر عنصر تعیین می کند.

 


.dad {
  width: 100px;
}

.dad .boy {
  max-width: 10%; /* 10px */
}

 

 

inherit

با استفاده از کلمه کلیدی inherit مقدار max-width عنصر برابر با مقدار ویژگی max-width عنصر پدر خواهد بود.

 

 

مثال

به عنوان مثال در دموی زیر عرض عنصر داخلی را برابر با 400 پیکسل قرار می دهیم ولی می خواهیم اگر عرض عنصر نگهدارنده از 400 پیکسل کمتر شد عنصر داخلی عرض نگهدارنده را داشته باشد. چرا که نمی خواهیم عنصر از نگهدارنده اش بیرون بزند و طرح را خراب کند. پس می توانیم علاوه بر تعیین ویژگی width همینطور به عنصر بگوییم که عرض تو نباید بیشتر از 100% عنصر نگهدارنده ات باشد:

دموی زیر حالتی است که طرح خراب شده است چرا که عرض عنصر داخلی بیشتر از عرض نگهدارنده است:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero assumenda fugiat obcaecati, necessitatibus quibusdam eligendi ducimus quod quaerat, molestias placeat hic cumque reiciendis, eum ipsa rem. Illum ab beatae doloremque earum corporis voluptatem numquam sequi deserunt dicta dolores aliquid laborum eius soluta hic, id recusandae, ut, nihil deleniti labore molestias animi? Illo provident at soluta asperiores est, alias natus officia reiciendis quis sit numquam tenetur, placeat cumque omnis necessitatibus sunt adipisci voluptas repellendus consectetur esse laudantium non dolore. Laudantium praesentium perspiciatis, nostrum tempora. Tempore sed qui mollitia reprehenderit suscipit corrupti quis aperiam asperiores cumque temporibus, magnam beatae quos debitis impedit!

اما در دموی زیر بصورت زیر عمل می کنیم:

 


.parent {
  width: 300px;
}

.child {
  width: 400px;
  max-width: 100%;
}

 

می توانید عرض عنصر نگهدارنده را با کشیدن گوشه آن بیشتر کنید.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero assumenda fugiat obcaecati, necessitatibus quibusdam eligendi ducimus quod quaerat, molestias placeat hic cumque reiciendis, eum ipsa rem. Illum ab beatae doloremque earum corporis voluptatem numquam sequi deserunt dicta dolores aliquid laborum eius soluta hic, id recusandae, ut, nihil deleniti labore molestias animi? Illo provident at soluta asperiores est, alias natus officia reiciendis quis sit numquam tenetur, placeat cumque omnis necessitatibus sunt adipisci voluptas repellendus consectetur esse laudantium non dolore. Laudantium praesentium perspiciatis, nostrum tempora. Tempore sed qui mollitia reprehenderit suscipit corrupti quis aperiam asperiores cumque temporibus, magnam beatae quos debitis impedit!

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *