Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use object-fit: cover for fixed-size images
Apply object-fit: cover to fixed-dimension images so non-square sources crop instead of distorting.
Bad example
| 1 | .logo { |
| 2 | width: 20px; |
| 3 | height: 20px; |
| 4 | } |
| 5 | /* a non-square source is squished/stretched into the 20x20 box */ |
Explanation (EN)
Without object-fit, a source whose intrinsic size differs from 20x20 is distorted to fill the box.
Objašnjenje (HR)
Bez object-fit, izvor cija se izvorna velicina razlikuje od 20x20 izoblicuje se da popuni okvir.
Good example
| 1 | .logo { |
| 2 | width: 20px; |
| 3 | height: 20px; |
| 4 | object-fit: cover; |
| 5 | } |
| 6 | /* non-square source crops to fill cleanly */ |
Explanation (EN)
object-fit: cover crops the image to fill the fixed box while preserving aspect ratio.
Objašnjenje (HR)
object-fit: cover obrezuje sliku da popuni fiksni okvir uz ocuvanje omjera stranica.
Exceptions / Tradeoffs (EN)
Use object-fit: contain instead when the whole image must be visible even if it leaves empty space.
Iznimke / Tradeoffi (HR)
Koristite object-fit: contain kad cijela slika mora biti vidljiva cak i ako ostaje prazan prostor.