Wednesday, June 12, 2024

The Download: Apple’s AI plans, and a carbon storage boom

At its Worldwide Developer Conference...

The Unrealized Potential Of Olfactory Design — Smashing Magazine

Kristian Mikhel covers various practical applications...

How to Override width and height HTML attributes with CSS

Software DevelopmentHow to Override width and height HTML attributes with CSS

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…

  • 6 Things You Didn’t Know About Firefox OS

    6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla’s finally given web developers the platform that they need to create apps the way they’ve been creating them for years — with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving…

  • Fix Anchor URLs Using MooTools 1.2

    Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to…

  • Multi-Select Transfers Using MooTools 1.2

Check out our other content

Check out other tags:

Most Popular Articles