One of many HTML components that continuously comes into collision with CSS is the img component. As we realized 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 through max-width values, however once you present a peak 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 peak attribute does not battle with max-width values?
The reply is as straightforward 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 search engines like google and yahoo is all the time a enjoyable stability. CSS and HTML had been by no means meant to battle however in some instances they do. Use this code to optimize for each customers and search engines like google and yahoo!
An Interview with Eric Meyer
Your early CSS books had been instrumental in pushing my love for entrance finish applied sciences. What was it about CSS that you just fell in love with and drove you to put in writing about it? At first blush, it was the simplicity of it as in comparison with the table-and-spacer…
Utilizing jQuery and MooTools Collectively
There’s but one more reason to grasp a couple of JavaScript library: you should use a few of them collectively! Since MooTools is prototype-based and jQuery just isn’t, jQuery and MooTools could also be used collectively on the identical web page. The XHTML and JavaScript jQuery is namespaced so the…
Create a Obtain Bundle Utilizing MooTools Moousture
Zohaib Sibt-e-Hassan lately launched an amazing mouse gestures library for MooTools known as Moousture. Moousture permits you to set off performance by shifting your mouse in specified customized patterns. Too illustrate Moousture’s worth, I’ve created a picture obtain builder utilizing Mooustures and PHP. The XHTML We offer…