How one can Override width and peak HTML attributes with CSS

One of many HTML parts that steadily comes into collision with CSS is the img factor. As we realized in Request Metrics’ Fixing Cumulative Structure Shift Issues on DavidWalshBlog article, offering picture dimensions inside 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 type changes are executed by way of max-width values, however whenever you present a peak worth to your picture, you may get a distorted picture. The objective ought to all the time be a show pictures in relative dimensions. So how can we make sure the peak attribute does not battle with max-width values?

The reply is as simple as peak: auto!

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

The dance to please customers and engines like google is all the time a enjoyable stability. CSS and HTML have 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!