Software Development

Override width and peak HTML attributes with CSS

Spread the love

One of many HTML parts that regularly comes into collision with CSS is the img aspect. 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 model changes are achieved through max-width values, however while you present a peak worth to your picture, you may get a distorted picture. The aim 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 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 is at all times 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!

  • Facebook Open Graph META Tags

    It is no secret that Fb has develop into a serious visitors driver for every type of internet sites.  These days even massive companies steer customers towards their Fb pages as a substitute of the company web sites instantly.  And naturally there are Fb “Like” and “Advocate” widgets on each web site.  One…

  • 9 Mind-Blowing WebGL Demos

    As a lot as builders now detest Flash, we’re nonetheless enjoying a little bit of catch as much as natively duplicate the animation capabilities that Adobe’s previous expertise supplied us.  In fact we now have canvas, an superior expertise, one which I highlighted 9 mind-blowing demos.  One other expertise out there…

Leave a Reply

Your email address will not be published. Required fields are marked *