DEV Community

Olaolu
Olaolu

Posted on

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 .....

Top comments (5)

Collapse
 
hendrikras profile image
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'
Collapse
 
hollaolla profile image
Olaolu

Thank You Hendrik.

kindly take a look.

mandilasmarket.com

Collapse
 
hollaolla profile image
Olaolu
  1. the images are stretched wrongly
  2. css html and javascript
  3. the rest of the html pages
Thread Thread
 
hendrikras profile image
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.

Thread Thread
 
hollaolla profile image
Olaolu

Thank you Hendrik! I'd try this out.