将宽度设置为 100% 但高度为默认值

Question

I wish to change the width of a pic to 100%. But don't want the height specified or affecting the width anyway and causing the image to distort.

What is the term to null/zero a height. I have been using /* height: 68px; */ as a fix in the stylesheet for now. But there must be a better way?

Before

height: 68px;
width: 482px;

After /* height: 68px; */ width:100%

Answer 1

Remove the height from the image all together and if the image inherits a height you can reset this using height: auto; also make sure to not forget resetting the min-height and max-height properties to auto if these are inherited / set.

The reason this works is because images maintain aspect ratio automatically so if you set a height only, the width will auto-adjust, if you set the width only, the height will auto adjust.

That's pretty much all there is to it!

Also - if you're looking for more advanced image effects I'd recommend replacing the image tag with a div containing the background-image property - it will allow you to be flexible in different ways such as allowing an image to scale until it covers the entire background ( background-size: cover; ) or to scale to whatever is possible ( background-size: contain ).

Good luck!

Answer 2

Just remove the height property from the css, for the image, and it should work. You cal also set image height to auto.