Delete the automatic height adjustment using CSS

Question

Delete the automatic height adjustment using CSS

I am experiencing an issue with images in HTML where the width and height are set, but a stylesheet is overriding them with "height: auto."

Is there a way to reset or override this CSS property so that the specified height in HTML takes precedence?

HTML:

<img src="..." width="350" height="150" />

CSS:

img {
  height: auto;
}

JSFiddle

Additional information:
I am implementing lazy loading for images in PrestaShop eCommerce, where I have limited control over the environment.
Upon document ready, I set the image source to a transparent pixel. However, as seen in the JSFiddle example, the image appears squared instead of respecting the width and height specified in HTML.
This discrepancy is due to the "height: auto" property causing the height to adjust according to the width, leading to visual inconsistencies and bugs when scripts modify the height incorrectly.

html css height

Answer 1

Answer №1

This solution may seem simple, but I wholeheartedly believe it's the exact answer you've been searching for...

It's impossible.

After defining a height for an img in CSS, any HTML declaration is immediately disregarded. There's no way within the CSS to then override that declaration and utilize the height specified in the HTML because terms like initial pertain to properties determined by CSS, not HTML attributes.

Refer to this guide on CSS Height, outlining all Property Values: ^{^{*Experimental/non-supported values omitted}}

height: auto | length | % | inherit | initial

If you try to redefine the height of img using any of these property values, they won't be effective - I've tested each one individually to confirm this.

length and % necessitate a specified height, precisely what you're aiming to avoid
initial will simply grab the original CSS declaration of height: auto;
inherit lacks a parent to inherit from, thus resorting to the default value of auto

Your sole option is to override the height in CSS, utilizing inline styles (suggested by Carter)...

<img style="height: 150px;" />

Alternatively, employ selectors such as IDs or classes...

<img id="my_image" />

#my_image {
    height: 150px;
}

Or, if you require JS to automatically generate overrides, consider implementing a jQuery solution like this:

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t represents the current iteration
    var ht = $t.attr("height");   //Retrieve the HTML height
    ht = ht ? ht+"px" : "auto";   //Add "px" if HTML height is defined | Use "auto" otherwise
    $t.css("height", ht);         //Apply the height to the current element
});

This script loops through all images on the page and assigns a CSS height corresponding to the HTML height. In the absence of an HTML height, it defaults to height: auto;.

Answer 2

This solution may seem simple, but I wholeheartedly believe it's the exact answer you've been searching for...

It's impossible.

After defining a height for an img in CSS, any HTML declaration is immediately disregarded. There's no way within the CSS to then override that declaration and utilize the height specified in the HTML because terms like initial pertain to properties determined by CSS, not HTML attributes.

Refer to this guide on CSS Height, outlining all Property Values: ^{^{*Experimental/non-supported values omitted}}

height: auto | length | % | inherit | initial

If you try to redefine the height of img using any of these property values, they won't be effective - I've tested each one individually to confirm this.

length and % necessitate a specified height, precisely what you're aiming to avoid
initial will simply grab the original CSS declaration of height: auto;
inherit lacks a parent to inherit from, thus resorting to the default value of auto

Your sole option is to override the height in CSS, utilizing inline styles (suggested by Carter)...

<img style="height: 150px;" />

Alternatively, employ selectors such as IDs or classes...

<img id="my_image" />

#my_image {
    height: 150px;
}

Or, if you require JS to automatically generate overrides, consider implementing a jQuery solution like this:

$("img").each(function() {        //Loop through all images
    var $t = $(this);             //$t represents the current iteration
    var ht = $t.attr("height");   //Retrieve the HTML height
    ht = ht ? ht+"px" : "auto";   //Add "px" if HTML height is defined | Use "auto" otherwise
    $t.css("height", ht);         //Apply the height to the current element
});

This script loops through all images on the page and assigns a CSS height corresponding to the HTML height. In the absence of an HTML height, it defaults to height: auto;.

Answer 3

Answer №2

To take precedence over existing CSS rules, you can utilize inline CSS properties. Remember that in HTML, the height attribute of an image element will not override CSS settings. To enforce a specific image height, you must employ inline styles like this:

<img src="..." width="350" style="height:150px;" />

Answer 4

To take precedence over existing CSS rules, you can utilize inline CSS properties. Remember that in HTML, the height attribute of an image element will not override CSS settings. To enforce a specific image height, you must employ inline styles like this:

<img src="..." width="350" style="height:150px;" />

Answer 5

Answer №3

It is advised not to set a global height for all img tags by overriding it. Instead, consider changing the declaration to:

.img-auto-height {
  height: auto;
}

Simply add class="img-auto-height" wherever you want an image to have automatic height.

Answer 6

It is advised not to set a global height for all img tags by overriding it. Instead, consider changing the declaration to:

.img-auto-height {
  height: auto;
}

Simply add class="img-auto-height" wherever you want an image to have automatic height.

Answer 7

Answer №4

If you need to change the height, try using this:

height: unset;

This is supported in most browsers except for Internet Explorer

Answer 8

If you need to change the height, try using this:

height: unset;

This is supported in most browsers except for Internet Explorer

Answer 9

Answer №5

Although it may not be a direct removal, there are several alternative approaches you can consider.

One option is to adjust the height through the parent element

div img { height: 150px; }

Alternatively, you can use a pseudo-selector

img:nth-child(1n){
  height: 150px;
}

img:nth-child(1n){
  height: 150px;
}
img {
  height: auto;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="width="350" height="150">

Answer 10

Although it may not be a direct removal, there are several alternative approaches you can consider.

One option is to adjust the height through the parent element

div img { height: 150px; }

Alternatively, you can use a pseudo-selector

img:nth-child(1n){
  height: 150px;
}

img:nth-child(1n){
  height: 150px;
}
img {
  height: auto;
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="width="350" height="150">

Answer 11

Answer №6

When implementing lazy loading for all images on a website, it is important to adjust the image size dynamically once the lazy loading process is in effect:

img:not(.lazy) {
  height: auto;
}

As the actual image loads, the HTML attribute height="X" will be applied, aligning closely with the true dimensions of the image.

To prevent any shifting effects during loading, using a base64 image placeholder with a similar aspect ratio to the final image can be beneficial (typically a 2:1 ratio works better than a square pixel ratio).

Answer 12

When implementing lazy loading for all images on a website, it is important to adjust the image size dynamically once the lazy loading process is in effect:

img:not(.lazy) {
  height: auto;
}

As the actual image loads, the HTML attribute height="X" will be applied, aligning closely with the true dimensions of the image.

To prevent any shifting effects during loading, using a base64 image placeholder with a similar aspect ratio to the final image can be beneficial (typically a 2:1 ratio works better than a square pixel ratio).

Answer 13

Answer №7

Following in the footsteps of J. Alba, I have also opted for the following solution:

img:not(.no-height-auto) {
  height: auto;
}

This ensures that most images will have a height set to auto, which is typically my desired outcome:

<!-- this image will adjust its height automatically -->
<img src="my-img.jpg" height="600" width="800" />

If there is a specific image where I do not want the height to be auto-adjusted, I simply apply the class:

<!-- this image will maintain a fixed height of 600px -->
<img src="my-img.jpg" class="no-height-auto" height="600" width="800" />

Answer 14

Following in the footsteps of J. Alba, I have also opted for the following solution:

img:not(.no-height-auto) {
  height: auto;
}

This ensures that most images will have a height set to auto, which is typically my desired outcome:

<!-- this image will adjust its height automatically -->
<img src="my-img.jpg" height="600" width="800" />

If there is a specific image where I do not want the height to be auto-adjusted, I simply apply the class:

<!-- this image will maintain a fixed height of 600px -->
<img src="my-img.jpg" class="no-height-auto" height="600" width="800" />

Delete the automatic height adjustment using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Inconsistencies with Colorbox behavior in an external HTML document

Using classes to override CSS

Steps to update the action attribute in a form element upon clicking a button

Responsive design for iPads and smartphones is essential in ensuring a seamless user

The PHP script fails to execute within HTML elements

Responsive design in Bootstrap(-Vue) with compact input fields

Manipulating HTML content with Javascript Array

Moving image transitions on the screen using CSS3

The performance of my SVG Filter is dismal

Reinitializing AngularJS form controls

What are some solutions to correct a tab layout that is utilizing absolute positioning?

The positioning of drawings on canvas is not centered

Stylesheet specific to Internet Explorer not loading

Tips for creating canvas drawings in GWT

The Art of Positioning Containers in CSS

Displaying a preloaded image on the canvas

Retrieve the Latest Information from the Asp.Table

Incorporating dynamic content changes for enhanced user experience can be achieved more effectively with AngularJS

How can one generate an HTML element using a DOM "element"?

How to interrupt a JQuery animation and restart it from the middle?