Menu
Could width:100% and max-width:100% be used interchangeably if any of them is used just once?
For example I get the same results with:
img{
width:100%;
}
and with:
img{
max-width:100%;
}
Am I missing something here?
935
"width" is a standard width measurement for defining the exact width of an element. Defining "width:100%" means that the width is 100%. Defining "max-width:100%" means that the width can be anywhere between 0% and 100% but no more then 100%. For example if my display has a 1200px availible width.
Answer is No. cause 100 is pixels and 100% is percentage of overall size of page.
This is a simple way to put it: if the element would render wider than the max-width says it should be, then the max-width property wins over the width property. But if it would render less than the max-width says, then the width property wins. In mathematical terms: if width > max-width; let the browser use max-width.
Should it Ever Be Used? In many cases, applying width: 100% to a block level element is either unnecessary or will bring undesirable results. If you're using padding on the inner element and you use box-sizing: border-box , then you'll be safe.
If your images are always larger than the element they are within the two rules will appear to behave the same. If an img is smaller than the parent element than the first rule will stretch it to the full width of its parent. The second rule will not.
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
