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!

مطالب مرتبط

14 دیدگاه برای “max-width”

  1. سلام خسته نباشید من یه مشکل در مفهوم width أارم چرا در عنصری دو تا width مینویسن مثلا
    #account_management_container{
    width: 95%;
    max-width: 1260px;
    position: relative;
    margin: auto;
    }
    ممنون میشم کمکم کنید که چرا دو تا عرض رو باهم مینویسن

    پاسخ

    1. فرض کنید من میخوام کل سایتم عرضش همیشه 95 درصد کل فضای موجود باشه. مینویسیم:

      
.site {
  width: 95%;
}

      حالا میرم سایتم توی یک تلوزیون باز می کنم می بینم اه چه ضایعست سایتم چقدر کش اومده. چرا؟ چون 95 درصد فضای موجود رو گرفته دیگه. تقریبا کل فضا فقط پنج درصد کم.

      بعد با خودم فکر میکنم خوب من میخوام همیشه 95 درصد رو کش بیاد ولی دیگه مثلا از 2000 پیکسل بیشتر نشه چکار می کنم؟ میرم به عنصرم میگم هی تو! هرچقدر دوست داری کش بیا ولی “بیشتر از” 2000 پیکسل “حق نداری” بشی:

      این حق نداری بشی رو با max-width نشون میدیم:

      
.site {
  width: 95%;
  max-width: 2000px;
}
      پاسخ

    1. در همینجایی که گفتم استفاده میشه :)

      اینطوری مینویسی که سایتت توی دستگاههای مختلف اونطوری که میخوای نمایش داده بشه. یکی از کارایی که برای واکنشگرا کردن سایت شاید بهتر باشه بشه همینه.

      پاسخ

      1. پس یعنی فقط برای این که در دستگاه های کوچیک تر زیبا بشه عرضی که برای عنصر میخایمو مینویسیم و بگیم چقدر هنگام کوچیک کردن مرورگر یا در درستگاه های دیگر از لبه های چپ و راست مرورگر فاصله داشته باشه با این عرض. بعد میشه در همه قسمت های سایت هم استفاده کرد یعنی بهتره در همه جا استفاده بشه این دو تا با هم ؟

        پاسخ

        1. سلام استاد عزیز ، مثلا یه همچین چیزی ، تو مرورگرای دیگه 999 پیکسل کل عرض مرورگرو نمیگیره ولی توی اینترنت اکسپلورر از نه به بالا تا 11 رو چک کردم 999 پیکسل میشه کل عرض مرورگر ولی مثلا کمتر از 999 max-width درست نشون داده میشه ، عرض اسکرینم هم 1366 پیکسله ، حالا نمیدونم آی ای زوم میکنه یا چی ، شرمنده اگه سوالم گنگه ، یه سوال دیگه هم داشتم اینکه از آی ای چند رو دیگه کلا ندید بگیرم ، مرسی استاد موفق باشی

          .max{max-width:999px;margin:0 auto;}
          .a{
          width:100%;
          height:200px;
          background-color:red;
          }

          پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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