Khawar Jatoi
← Writings
Trick to remove image white background + fix image size.
.img-fix{
width:100%; /* fluid */
aspect-ratio:3/2; /* same shape for every image */
object-fit:contain; /* fit inside, no stretch */
mix-blend-mode:multiply; /* blends white away on light bg */
}
Sizing:aspect-ratio locks the shape while width stays fluid — don't hardcode height or it stops being responsive. 3/2 is just the classic photo ratio; swap for 1/1 (square), 16/9 (wide), 4/5 (portrait). Value is width / height.
Stretch: object-fit: contain = whole image fits, maybe gaps. cover = fills box, maybe crops.
White bg: blend modes don't delete white, they blend it with the background — only works on light/matching backgrounds. multiply is cleaner than color-burn. For real transparency, use a PNG with alpha instead.