Images deform on the website landing page.

Please what could make my website images deform on the landing page and seat well on other inner pages? and how do I correct this please .....

Comments

[Hendrik Ras]

It would be helpful to give a little more context in order for anyone to be able to give a meaningful answer:

1. describe 'deformation' of images, are they cropped, blurry, pixelated? Perhaps upload an example of such an image if you are permitted.
2. what is your stack, are you using wordpress, or coding in plain HTML?
3. define: 'other inner pages'

[Olaolu]

Thank You Hendrik.

kindly take a look.

mandilasmarket.com

[Olaolu]

1. the images are stretched wrongly
2. css html and javascript
3. the rest of the html pages

[Hendrik Ras]

The images used have a different aspect ratio than the container you want to place them in.

There are 2 ways to go about this:

1. Use image editing software to crop/ edit the original image, so it will fit.
2. Configure the CSS in such a way that images will always maintain it's aspect ratio, you can look into Object-fit for example

Hope that helps.

[Olaolu]

Thank you Hendrik! I'd try this out.