One of many HTML components that incessantly comes into collision with CSS is the img ingredient. 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’d like CSS and HTML to work collectively.
Most responsive design type changes are executed by way of max-width values, however once you present a peak worth to your picture, you will get a distorted picture. The objective ought to at all times be a show photos in relative dimensions. So how will we make sure the peak attribute would not battle with max-width values?
The reply is as simple as peak: auto!
/* assuming any media question */
img {
/* Make sure the picture would 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 at all times a enjoyable stability. CSS and HTML have been by no means meant to battle however in some instances they do. Use this code to optimize for each customers and engines like google!
I’m an Impostor
That is the toughest factor I’ve ever needed to write, a lot much less admit to myself. I’ve written resignation letters from jobs I’ve liked, I’ve ended relationships, I’ve failed at a number of duties, and let myself down in my life. All of these emotions have been very…
