Rules Hub
Coding Rules Library
Prefer max-width over width for fluid media
Use max-width to ensure images respond to container size without forcing them to stretch beyond their natural resolution.
Bad example
| 1 | .logo { |
| 2 | display: block; |
| 3 | /* Forces the image to stretch to fill the container even if the image is small */ |
| 4 | width: 100%; |
| 5 | max-width: 100%; |
| 6 | height: auto; |
| 7 | } |
Explanation (EN)
Setting 'width: 100%' forces the element to fill the container width, causing pixelation if the image is naturally smaller. Adding 'max-width: 100%' becomes redundant because the width is already locked to 100%.
Objašnjenje (HR)
Postavljanje 'width: 100%' prisiljava element da ispuni širinu kontejnera, što uzrokuje pikselizaciju ako je slika prirodno manja. Dodavanje 'max-width: 100%' postaje suvišno jer je širina već fiksirana na 100%.
Good example
| 1 | .logo { |
| 2 | display: block; |
| 3 | /* Allows natural size but prevents overflow on small screens */ |
| 4 | max-width: 100%; |
| 5 | height: auto; |
| 6 | } |
Explanation (EN)
Using only 'max-width: 100%' allows the image to remain at its intrinsic size (sharp resolution) but shrink down if the container becomes narrower than the image.
Objašnjenje (HR)
Korištenje samo 'max-width: 100%' omogućuje slici da zadrži svoju prirodnu veličinu (oštra rezolucija), ali se smanjuje ako kontejner postane uži od slike.