How to Override width and height HTML attributes with CSS

One of many HTML parts that incessantly comes into collision with CSS is the img ingredient. As we discovered in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, offering picture dimensions throughout the picture tag will assist to enhance your web site’s rating. However in a world the place responsive design is king, we’d like CSS and HTML to work collectively.

Most responsive design model changes are achieved through max-width values, however once you present a top worth to your picture, you may get a distorted picture. The aim ought to all the time be a show photographs in relative dimensions. So how can we make sure the top attribute does not battle with max-width values?

The reply is as simple as top: auto!

/* assuming any media question */
img {
  /* Make sure the picture does not go offscreen */
  max-width: 500px;
  /* Make sure the picture top is responsive no matter HTML attribute */
  top: auto;
}

The dance to please customers and search engines like google and yahoo is all the time a enjoyable stability. CSS and HTML had been by no means meant to battle however in some circumstances they do. Use this code to optimize for each customers and search engines like google and yahoo!