Tips on how to Override width and top HTML attributes with CSS

One of many HTML components that continuously comes into collision with CSS is the img aspect. As we discovered in Request Metrics’ Fixing Cumulative Structure Shift Issues 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 want CSS and HTML to work collectively.

Most responsive design fashion changes are performed by way of max-width values, however while you present a top worth to your picture, you will get a distorted picture. The aim ought to at all times be a show photos in relative dimensions. So how will we make sure the top attribute would not battle with max-width values?

The reply is as simple as top: auto!

/* assuming any media question */
img {
  /* Make sure the picture would 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 engines like google is at all times a enjoyable steadiness. 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 engines like google!