Make an image width 100% of parent div, but not bigger than its own width

html width css
Alfonso picture Alfonso · Aug 12, 2010 · Viewed 280.2k times · Source

I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?

Answer

Fyodor Soikin picture Fyodor Soikin · Aug 12, 2010

Just specify max-width: 100% alone, that should do it.

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More
Does height and width not apply to span?

Total noob question, but here. CSS .product__specfield_8_arrow { /*background-image:url(../../upload/orng_bg_arrow.png); background-repeat:no-repeat;*/ background-color:#fc0; width:50px !important; height:33px !important; border: 1px solid #dddddd; border-left:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-bottom-left-radius:0px; …

Read More