What is the best way to fix images that appear stretched out when the containing DIV class is sized properly?

I'm currently tackling a timeline module in Elementor/Wordpress. Even though the image is uploaded correctly and displayed properly in the Wordpress gallery with the correct proportions, it appears distorted.

The 

<div class="eael-content-timeline-img eael-picture">
class seems fine when inspected, showing dimensions of 60x60. However, upon hovering over the img src, I noticed the dimensions are incorrect (60x24) and I have no idea where those numbers originated from because they were not set by me during building.

Check out this screenshot to see the distortion and my perspective from Chrome Inspector

htmlcsswordpressimageelementor

Answer №1

To maintain the original aspect ratio of an image and prevent it from distorting, use the below CSS code to style the img element within the div:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to automatically scroll to the element id of the current view

Is it possible to retrieve the name of an anchor tag in view as a user scrolls through an HTML page with multiple paragraphs and associated anchor tags? <p><a name="para1"></a> some long text </p> <p><a name="para2"> ...

javascriptjqueryhtmlcss

What is the best way to randomly display an image from a JavaScript array within an HTML document?

I currently have this code in my HTML and JavaScript files, but I am having trouble with displaying images without using a URL in the JavaScript file. The images are located in my project folder. However, when I open the HTML file, the images do not appear ...

javascriptjqueryhtmlimagegenerator

Image conceals secretive PHP script

I currently have a webpage featuring various images, each of which has a button allowing users to favorite the image. Upon clicking this button, a PHP script is triggered in order to add the image to their list of favorites. My objective is to initiate th ...

phpjqueryhtmlajax

Press the HTML link to interact with a text using JAVA

I am currently working on creating a class that is able to interact with an A text/button in HTML. The webpage requires a username and password, so I have utilized JSOUP to parse the document and insert the user and password details using the .data method: ...

javahtmlseleniumjsouphtmlunit

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

What is the reason for the continual appearance of the *ngIf validation message?

Currently, I am working with Angular and HTML. I have implemented pattern validation for the first name field, which should not accept only numbers. <fieldset class="six"> <input id="firstName" ng-pattern="^[a-zA-Z]+$" type="text" ...

htmlcssangular

What is the reason for CSS being implemented exclusively on my master page?

I have a link to an external CSS file in the head section of my Master page. <link href="style.css" rel="stylesheet" type="text/css" /> Although I can apply the style in child pages during design time... <asp:Label ID="Label" runat="server" Css ...

asp.netcssmaster-pages

What are some ways to style CSS for links, such as a login button?

Check out this website You may have noticed the login button with a stylish black background created using CSS. How can I achieve a similar look? Some buttons are PHP statements while others are simple play links. I also need the register, lost password, ...

phphtmlcsswordpresshyperlink

Utilizing Twitter Bootstrap to populate form fields from a dropdown selection

I am currently using twitter bootstrap for my front end web development project. I have successfully implemented a text field with a dropdown menu right next to it: <div class="input-group"> <input type="text" class="form-control" name="ope ...

javascripthtmltwitter-bootstraplaravel-4

Exploring the Vertical Metrics of Various Typeface Styles

I'm encountering a problem and struggling to find a solution. I'm in the process of creating a website and incorporating various fonts. My goal is to ensure that every font appears visually similar to the others and align perfectly at the base. ...

htmlcssfontswebfonts

Save data to local storage using the 'onclick' event in jQuery

I'm facing an issue with local storage. My portfolio includes my work, contacts, etc., and I lack buttons that can toggle between Swedish and English languages when clicked. How can I use local storage to remember the language choice even after refres ...

jqueryhtmljsononclicklocal-storage

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

javascriptjqueryhtmlcss

What adjustments can I make to my smooth-scrolling JavaScript code in order to exclude my Bootstrap Carousel from the scrolling

On my website, I have incorporated JavaScript to create a smooth-scrolling effect when a user clicks on a hyperlink. This feature is essential as the landing page includes a chevron-down icon that prompts the user to navigate to the next section of the pag ...

javascripthtmltwitter-bootstrapbootstrap-4

Achieving bottom alignment for an element within a flex item: steps for success

I am dealing with a flex container that contains three flex items, each of which has a link that needs to be aligned at the bottom (all links should be bottom middle-aligned). The flex-items are stretched and do not have a fixed height, similar to the fle ...

htmlcssflexbox

Reorganize the layout of elements based on the array of element IDs

I have a task to complete that involves two 'ul' elements with unique id's and 'li' elements within them. <div id="sr"> <ul id="li-fav"> <li id="app-1">a</li> <li id=" ...

javascripthtmldomdocumentfragment

Modify the standard placement of choices in MUI

Currently, my UI is powered by MUI. I have various options displayed in the image below: https://i.sstatic.net/YKoyV.png Everything looks good so far. However, I wish to reposition the options container further down. (It is currently set at top: 64px ...

cssmaterial-uimakestyles

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

Issues with Bootstrap Container on Smartphones

Currently tackling the responsive design aspect of my website, however, I've encountered a bug specifically with mobile devices. Interestingly, testing it on my desktop browser proves smooth sailing, but when attempting on my iPhone, I faced some chal ...

htmlcsstwitter-bootstrapmobile

Permitting the inclusion of decimals in the isNaN function

My script currently has the capability to input a number in one textbox and calculate its equivalent in other textboxes. $("input[type=text]").keyup(function () { var number = parseFloat($(this).val()); var inc = parseFloat($(this).attr( ...

javascriptjqueryhtml

Determine the overall sum of all items

Utilizing data fetched from my SQLite database, I'm utilizing *ngFor to display a comprehensive list of items with their respective names, prices, amounts, and totals. How can I calculate the grand total and display it at the bottom of the list? chec ...

htmlangularsqliteionic-framework