How to Override width and height HTML attributes with CSS

Date:

Share post:

One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together.

Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values?

The answer is as easy as height: auto!

/* assuming any media query */
img {
  /* Ensure the image doesn't go offscreen */
  max-width: 500px;
  /* Ensure the image height is responsive regardless of HTML attribute */
  height: auto;
}

The dance to please users and search engines is always a fun balance. CSS and HTML were never meant to conflict but in some cases they do. Use this code to optimize for both users and search engines!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • Send Text Messages with PHP

    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was…OK, I had all of these things too.  But I still don’t get…

  • Write Simple, Elegant and Maintainable Media Queries with Sass
  • MooTools 1.3 Browser Object

    MooTools 1.3 Browser Object

    MooTools 1.3 was just released and one of the big additions is the Browser object.  The Browser object is very helpful in that not only do you get information about browser type and browser versions, you can gain information about the user’s OS, browser plugins, and…

  • JavaScript Battery API

Source link
spot_img

Related articles

How to Sell UX Research with Two Simple Questions – A List Apart

Do you find yourself designing screens with only a vague idea of how the things on the screen...

CISO dodges bullet protecting $8.8 trillion from shadow AI

Want smarter insights in your inbox? Sign up for our weekly newsletters to get only what matters to...

UK Charges Four in ‘Scattered Spider’ Ransom Group – Krebs on Security

Authorities in the United Kingdom this week arrested four alleged members of “Scattered Spider,” a prolific data theft...