3

I have an image which I need to a max width as its parent element.

With this code the image is shown with a width of 600px. I need the image to have a width equal to 400px, even though the natural width of the image is 600px.

How can I do this?

<div style="width: 400px">
   <table>
    <tr><td>
      <img widht="600" ..../>
   </td></tr>
  </table>
</div>

I have this css:

table, img
{max-width:100%}
chefnelone
  • 189
  • 1
  • 4
  • 16
  • Possible duplicate of [Make an image width 100% of parent div, but not bigger than its own width](http://stackoverflow.com/questions/3463664/make-an-image-width-100-of-parent-div-but-not-bigger-than-its-own-width) – T.Todua Sep 08 '16 at 10:36

3 Answers3

3
 img{  width: 100%; }

will sort you out. This will 'expand' the image width the the size of the containing element.

Pat Dobson
  • 3,249
  • 2
  • 19
  • 32
  • I works but then the image loss its proportion since the height remain the original one. I need the height to be recalculate based in its width. – chefnelone Nov 22 '13 at 13:57
1

Get rid of your width attribute in img. Then follow it up with max-width:100% and that should do it.

beautifulcoder
  • 10,832
  • 3
  • 19
  • 29
  • Agreed. The problem isn't that your not declaring a size in your CSS. It's that you're overriding it within your HTML. – Hynes Nov 22 '13 at 13:58
0

If you only care about the parent-img relationship, you dont need a table...in that case..

See this fiddle

HTML

<div>
   <img src='http://www.mibz.com/wp-content/uploads/2009/10/tesla-model-s-large-3.jpg' />
</div>

CSS

div{
    width:200px;
}
img{
    max-width:100%;
}
SW4
  • 69,876
  • 20
  • 132
  • 137