One of many HTML parts that steadily comes into collision with CSS is the img aspect. As we discovered 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 executed through max-width values, however while you present a peak worth to your picture, you will get a distorted picture. The purpose ought to all the time be a show pictures in relative dimensions. So how can 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 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 circumstances they do. Use this code to optimize for each customers and search engines like google and yahoo!
Chris Coyier’s Favourite CodePen Demos
David requested me if I might be up for a visitor publish selecting out a few of my favourite Pens from CodePen. A frightening job! There are such a lot of! I managed to choose just a few although which have blown me away over the previous few months. For those who…
Responsive and Infinitely Scalable JS Animations
Again in late 2012 it was not straightforward to seek out open supply tasks utilizing
requestAnimationFrame()– that is the hook that enables Javascript code to synchronize with an internet browser’s native paint loop. Animations utilizing this technique can run at 60 fps and ship incredible…
CSS Mounted Positioning
Whenever you need to maintain a component in the identical spot within the viewport irrespective of the place on the web page the consumer is, CSS’s fixed-positioning performance is what you want. The CSS Above we set our aspect 2% from each the highest and proper hand aspect of the…
