این روزها کتاب Responsive Web Design with HTML5 and CSS3 نوشته‌ی Ben Frain رو می خونم. در فصل اول نکته‌ی جالبی گفته بود که نمی‌دونستم. در مورد تفاوت دو style زیر می گه:
.img{max-width:100%}
با
.img{width:100%}
وقتی max-width:100% را برای تصویر می‌گذاریم، تصویر تا ماکزیمم سایز خود می‌تواند رشد کند. اگر container آن تصویر کوچکتر از اندازه واقعی تصویر باشد، تصویر اندازه خود را متناسب با ظرفش بزرگ می‌کند و از محدوده اندازه container تجاوز نمی‌کند. اما اگر اندازه تصویر کوچکتر از container خود باشد، وقتی به اندازه واقعی خود رسید، دیگر از آن بزرگتر نمی‌شود، حتی اگر container خیلی بزرگ شود.
در مقابل اما، اگر width:100% را برای تصویر بگذاریم، تصویر خود را به اندازه‌ای بزرگ می‌کند که ۱۰۰% container خود را بپوشاند. حتی اگر این اندازه بزرگتر از اندازه واقعی تصویر باشد و باعث دفرمه شدن تصویر شود.
این مطلب در صفحه ۱۴ کتاب ذکر شده. اگر برداشت من اشتباهه، ممنون می‌شم اطلاع بدین.
