Tuesday, June 25, 2024
HomeSoftware DevelopmentOverride width and peak HTML attributes with CSS

Override width and peak HTML attributes with CSS

One of many HTML parts that incessantly comes into collision with CSS is the img aspect. As we discovered 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 accomplished through max-width values, however while you present a peak worth to your picture, you will get a distorted picture. The objective ought to at all times be a show pictures 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 engines like google is at all times 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 engines like google!

  • Vibration API

    Lots of the new APIs supplied to us by browser distributors are extra focused towards the cell person than the desktop person.  A type of easy APIs the Vibration API.  The Vibration API permits builders to direct the gadget, utilizing JavaScript, to vibrate in…

  • CSS Filters

    CSS filter help lately landed inside WebKit nightlies. CSS filters present a technique for modifying the rendering of a fundamental DOM aspect, picture, or video. CSS filters enable for blurring, warping, and modifying the colour depth of parts. Let’s have…



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments