Responsive Images (CSS)
img { max-width: 100%; height: auto; } ek bahut common, almost universal CSS reset hai — images ko automatically apne container ke andar fit karta hai, kabhi overflow nahi hota, aspect ratio bhi maintain rehta hai (height: auto ki wajah se).
object-fit (pehle dekha) images ko container ke andar "crop" ya "fit" karne ke liye — especially jab image ka natural aspect ratio container se match nahi karta.
img {
max-width: 100%; /* kabhi container se bada nahi hoga */
height: auto; /* aspect ratio maintain, distort nahi hoga */
}
.thumbnail {
width: 200px;
height: 200px;
object-fit: cover; /* fixed size mein crop karke fit */
}- img { max-width: 100%; height: auto; } = almost universal safe default
- Images kabhi container se overflow nahi honge
- object-fit = crop/fit control jab aspect ratios match na karein
aspect-ratio (modern CSS) element ka width:height ratio maintain karta hai — video embeds, image placeholders ke liye bahut useful, "layout shift" avoid karne ke liye (jab tak actual content load ho).
.video-wrapper {
aspect-ratio: 16 / 9; /* hamesha 16:9 ratio maintain */
width: 100%;
}
.square-thumbnail {
aspect-ratio: 1 / 1; /* perfect square, kisi bhi width par */
}background-image (unlike <img>) alt text support nahi karta (accessibility concern — purely decorative images ke liye theek hai) aur bandwidth-conscious loading (jaise srcset) bhi directly support nahi karta — content-critical images ke liye <img> better choice hai.
/* Decorative background — CSS theek hai: */
.hero-section {
background-image: url('decorative-pattern.jpg');
}
/* Content-critical image — <img> better hai (alt text, srcset): */
/* <img src="product.jpg" alt="Product photo" srcset="..."> */