One of many HTML components that ceaselessly comes into collision with CSS is the img component. As we discovered 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 carried out by way of max-width values, however whenever you present a peak worth to your picture, you may get a distorted picture. The purpose ought to all the time 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 straightforward 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 serps 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 serps!
Designing for Simplicity
Earlier than we get began, it is value me spending a short second introducing myself to you. My identify is Mark (or @integralist if Twitter occurs to be your communication software of alternative) and I at the moment work for BBC Information in London England as a principal engineer/tech…
iPhone-Model Passwords Utilizing MooTools PassShark
Each from time to time I come throughout a plugin that blows me out of the water and the latest wrongdoer is PassShark: a MooTools plugin that duplicates the iPhone’s technique of exhibiting/hiding the final character in a password area. This gem of…
CSS Transforms
CSS has turn into an increasing number of highly effective over the previous few years and CSS transforms are a chief instance. CSS transforms permit for classy, highly effective transformations of HTML components. A number of transformations might be utilized to a given component and transforms may even be animated…
