One of many HTML components that regularly comes into collision with CSS is the img component. As we realized in Request Metrics’ Fixing Cumulative Format 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 model changes are finished through max-width values, however once you present a top worth to your picture, you will get a distorted picture. The aim ought to all the time be a show pictures in relative dimensions. So how can we make sure the top attribute would not battle with max-width values?
The reply is as straightforward 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 search engines like google is all the time a enjoyable steadiness. 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 search engines like google!
5 Superior New Mozilla Applied sciences You’ve By no means Heard Of
My journey to Mozilla Summit 2013 was unbelievable. I’ve spent a lot time specializing in my venture that I had overpassed all the nice work Mozillians have been placing out. MozSummit offered the right reminder of how good my colleagues are and the way a lot…
