search

ascentiaci / ascentiaci.ca

Ascentia Career Institute Main Marketing Site
1 stars 1 forks source link

Website issue - from Michael - 2024-06-07T16:41:39.912Z #51

Closed fireball8931 closed 4 weeks ago

fireball8931 commented 1 month ago

Page: https://staging.ascentiaci-ca.pages.dev//

Commment: The image for the program category is stretched. We should fix it so it covers/crops instead of stretching

fireball8931 commented 1 month ago

Enrichment from ChatGPT:

Title: Website issue - from Michael - 2024-06-07T16:41:39.912Z

Content: Page: https://staging.ascentiaci-ca.pages.dev/

Comment: The image for the "Programs" category is stretched. It appears that the image aspect ratio is being distorted to fit the container. We should modify the CSS property to ensure the image maintains its original aspect ratio and is cropped or scaled to fit the designated area appropriately (e.g., using object-fit: cover instead of object-fit: fill). The issue can be observed under the "Programs" section on the homepage. Here's a quick inspection of the HTML and CSS:

HTML Snippet:

<div class="program-category">
  <img src="path/to/program-image.jpg" alt="Program Image" />
</div>

CSS Snippet:

.program-category img {
  width: 100%; /* This is causing the image to stretch */
  height: auto; /* Adjust this property */
  object-fit: cover; /* Add this property to maintain aspect ratio and crop */
}
fireball8931 commented 4 weeks ago

Fixed by Pull Request #53