CODEWITHSUNDEEP
htmlcsswordpressimageelementor
DigitalHeather
DigitalHeather

Reputation: 3

How do I correct images that are stretching disproportionately when the DIV class containing it is sized correctly?

I'm currently working on a timeline module (Elementor/Wordpress) and although the image is uploaded correctly, displays correctly in the Wordpress gallery, and shows the correct proportions there, it's ultimately displaying wrong.

The div class is <div class="eael-content-timeline-img eael-picture"> and in the Inspector I can hover over it and see the dimensions are correct (In this case 60x60). However, when I hover over the img src, I can see the dimensions are skewed (60x24) and I'm unsure where those numbers are coming from because it's nothing that I've set through the builder.

Screenshot of the stretching and my view from Chrome Inspector

Upvotes: 0

Views: 526

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

To ensure the aspect ratio of the image is preserved and the image does not get stretched, apply the following CSS, targeting the img inside the div:

.eael-content-timeline-img img {
  width: 100%;
  height: auto;
}

Upvotes: 1

Related Questions