Using max-width vs width in Responsive Web Design

I'm learning Journey into Mobile course in Code School. In level 5 Responsive Media, I was told to apply max-width:100%; style on img, embed, object, video elements. I wondered why it is max-width:100%; but not width:100%; ? After Googling I didn't find the answer, but someone asked on Stackoverflow too. So I tried to answer it myself.

My answer:

I have the same question and I think this is the answer after doing a little experiment:

width:100%; scales the width of an image no matter what happens.

• When 100% is greater than the original resolution of that image, the image keeps scaling and thus looks blurry.
• When height is assigned to that image, the width keeps scaling and thus becomes stretched.

max-width:100%; scales the width of an image more carefully.

• When 100% is greater than the original resolution of that image, the image stops scaling and looks delicate.
• When height is assigned to that image, the width stops scaling and keeps the aspect ratio.

So i think this is the reason why people are using max-width rather than width.

Screen capture of the experiment:  (the sketch image is 600 px * 432 px)

Web page of the experiment: here

Original post on Stackoverflow: here

JavaScript 的 Data Type（圖片更新：2012-06-26）

連續漫畫，建議直接點擊圖片，用相簿模式瀏覽。也是為了 iThome 的 JavaScript 忍之道活動而畫的「設計師的 JavaScript 繪卷」系列的延伸作品。

感謝 godfat 強大的技術指導、Brecht 的循循善誘、Brian Hsu 精闢的記憶體管理教學文章、以及 jserv 大神的鼓勵和書籍推薦。^o^

JavaScript 的 Reference 遊戲（圖片更新：2012-06-11）

連續漫畫，建議直接點擊圖片，用相簿模式瀏覽。原圖是為了 iThome 的 JavaScript 忍之道活動而畫的「設計師的 JavaScript 繪卷」系列。

感謝 godfat 強大的技術指導，Brecht 的循循善誘，以及 iT邦 幫友的熱情回饋 XD

Object = Data + Methods | 筆記：松本行弘的程式世界

物件是變聰明的資料，物件 object = 資料 data + 方法 methods。

用具體的三次元的物體去比喻物件的話，它就好像是一個雙格的櫃子，一格放著資料，另一格放著方法。不管櫃子跑去到哪裡，格子內的東西都會跟著一起走。

上圖表達雙格櫃子的概念，同時，也是 Ruby 物件的語法小抄。裡面記錄了各種格式寫法，包括物件 ID、字串 string / 數字 number / 陣列 array / 雜湊 hash / 類別變數 class variable / 實例變數 instance variable、物件方法 methods 等。

所謂的物件 object，其實是物件實例 object instance 的簡稱。

所謂的物件實例，指的是物件類別 object class 生出來的的子子孫孫們。用 Matz 的說法，類別和實例的關係，就像是模子和人形燒，實例是從類別的模子中印出來的人形燒。

對於大部分的物件導向語言來說，物件是採用上述的人形燒模式，但是，少數的物件導向語言，如 JavaScript ，它的類別和實例的關係，不是模子和人形燒，而是漩渦鳴人和影分身的關係。此時物件的類別不叫做類別，而叫做原型 prototype。

Blogging as a Programmer

為了 iThome 跟 JSDC 舉辦的 JS Ninja 活動而寫文章收集忍者徽章，為此，開了一個適合寫技術文章的 blog。邁向前端工程師之路！GO！ \^o^/