CODEWITHSUNDEEP
htmlcss
Robert
Robert

Reputation: 10380

img max-width with percentage how does it work?

I am new to responsive web design and was looking at an answer.

It doesn't really explain much but provides a solution.

If an img is set as width: 100% I understand that it will occupy 100% of the browser window or its containing element.

The max-width property states that it is used to set the max width of an element.

If I set an img tag to max-width: 100% to what element/context is the percent calculated against?

All I see is when max-width is used the image scales down but never up.

Max-width example: http://jsfiddle.net/ErNeT/1445/

Width example:http://jsfiddle.net/ErNeT/1446/

Upvotes: 2

Views: 4291

Answers (4)

Season
Season

Reputation: 4366

When you set percentage values, both width and max-width are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined.

From the specification,

https://www.w3.org/TR/CSS2/visudet.html#the-width-property

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1. Note: For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.

https://www.w3.org/TR/CSS2/visudet.html#min-max-widths

Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.

Upvotes: 1

user5283754
user5283754

Reputation:

If I set an img tag to max-width: 100% to what element/context is the percent calculated against?

By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width.

On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.

Upvotes: 2

Fiido93
Fiido93

Reputation: 1978

From my point of view

if width > max-width use max-width

Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.

Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.

DEMO

this is what i understand about the difference between width and max-width.

Based on your question and fiddle, I think this is the answer what you're looking for.

Max-width example: DEMO2 - When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.

Width example: DEMO3 - When you start use width and set 100%. Meaning that your image are override the original image width.

Upvotes: 0

Wim Mertens
Wim Mertens

Reputation: 1790

If you set max-width to img then it will be the max-width of its parent. If you don't specify a width for the img then it will not exceed it's native size.

Upvotes: 1

Related Questions