KeshavAnandCode/tscb-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust image sizing to maintain aspect ratio and fit content

Browse Source 
Modify CSS for the cricket image to ensure it displays with its natural aspect ratio, constraining its height to align with adjacent text while allowing its width to adjust proportionally.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1cf11e65-6deb-45c8-b84b-15ffb586a42f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 1693786b-1a78-40ff-bda7-bbae9e47519e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/ef74882e-373e-40b4-93c7-cf128544a855/1cf11e65-6deb-45c8-b84b-15ffb586a42f/ZDkY1x7
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-03-17 22:01:32 +00:00
parent 85d955fdad
commit c0d1d517ae
2 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
css/bundle.css
View File

@@ -10828,14 +10828,28 @@ body {
}
/* ============================================================
CRICKET IMAGE (first about section) — Natural aspect ratio
Let the image display at its own proportions; no forced crop.
CRICKET IMAGE (first about section) — Natural aspect ratio,
width shrinks to fit; height constrained to match text column.
============================================================ */
.page-about-us .about-img-1 {
width: auto !important;
max-width: 100% !important;
}
.page-about-us .about-img-1 figure {
display: flex !important;
justify-content: center !important;
}
.page-about-us .about-img-1 img {
aspect-ratio: unset !important;
max-height: none !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 480px !important;
aspect-ratio: unset !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
}
/* ============================================================

22
css/enhance.css
View File

@@ -797,14 +797,28 @@ body {
}
/* ============================================================
CRICKET IMAGE (first about section) — Natural aspect ratio
Let the image display at its own proportions; no forced crop.
CRICKET IMAGE (first about section) — Natural aspect ratio,
width shrinks to fit; height constrained to match text column.
============================================================ */
.page-about-us .about-img-1 {
width: auto !important;
max-width: 100% !important;
}
.page-about-us .about-img-1 figure {
display: flex !important;
justify-content: center !important;
}
.page-about-us .about-img-1 img {
aspect-ratio: unset !important;
max-height: none !important;
width: auto !important;
max-width: 100% !important;
height: auto !important;
max-height: 480px !important;
aspect-ratio: unset !important;
object-position: center center !important;
display: block !important;
margin: 0 auto !important;
}
/* ============================================================