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

Question

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

User · Answer

I would use the property display  table-cell  Here is the link

User · Answer

Found this post on a Google search  and it solved my issue thanks to  jwal reply  but I made one addition to his solution   img content x700     width  auto  important    override the width below     width  100     max-width  678px    float  left    clear  both      With the above I changed the max-width to the dimensions of the content container that my image is in  In this case it is  container width - padding - boarder   max width  This way my image won t break out of the containing div  and I can still float the image within the content div   I ve tested in IE 9  FireFox 18 0 2 and Chrome 25 0 1364 97  Safari iOS and seems to work   Additional  I tested this on an image 1024px wide displayed at 678px  the max width   and an image 500px wide displayed at 500px  width of the image

User · Answer

If the image is smaller than parent      img 100     width  100

User · Answer

In line style - this works for me every time    lt div class  imgWrapper  gt       lt img src   theImg jpg  style  max-width  100   gt   lt  div gt

User · Answer

Just specify max-width  100  alone  that should do it

User · Answer

Setting a width of 100  is the full width of the div it s in  not the original full-sized image  There is no way to do that without JavaScript or some other scripting language that can measure the image  If you can have a fixed width or fixed height of the div  like 200px wide  then it shouldn t be too hard to give the image a range to fill  But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted

User · Answer

I found an answer which worked for me and can be found in the following link   Full Width Containers in Limited Width Parents

User · Answer

I was also having the same problem  but I set the height value in my CSS to auto and that fixed my problem  Also  don t forget to do the display property       image         height  auto        width  auto        max-height  550px        max-width  1200px        margin-left  auto        margin-right  auto        display  block

User · Answer

You should set the max width and if you want you can also set some padding on one of the sides  In my case the max-width  100  was good but the image was right next to the end of the screen     max-width  100     padding-right  30px      add more paddings if needed

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

Examples related to html

Examples related to width

Examples related to css