Resetting Image width and height HTML attributes generated by wordpress

On 29 Feb, 2012 in CSS with Comments

We all know wordpress genrates height and width attributes for inage tags. Which might cause ovelapping issues, while creating responsive design.So, we have come up with a solution. This time we woon’t be using wordpress hacks, instead we will be using CSS.

Resetting Image width and height HTML attributes generated by wordpress

At first, lets take look at wordpress generated attributes for image tag

<img src="[url]" alt="[text]" title="[text]" width="[size]" height="[size]" class="[class names]"/>

We can see the extra width and height attributes, which defines image size.but while making the image responsive using

max-width: 100%;
max-height: 100%;

Those html attributes overlap over css property and make it look buggy. So, to overcome this problem. We need to take support of css selectors.

img[width],
img[height]{
   width:auto;
   height:auto;
}

In the above css, we have selected two selectors. They are image tag with width attribute and image with height attribute. Then reset the width and height to auto.That’s it we are done.

Tags: ,