title: Why doesn't my image width inherit from parent div width
body: <p>Guys I have a div like this:</p>
  
  <pre><code>&lt;div id="image-container"&gt;
   &lt;img id="image" src="#" &gt; //with an image inside
  &lt;/div&gt;
  </code></pre>
  
  <p>And styled this way:</p>
  
  <pre><code>#image-container {
      width: 750px;
      height: 360px !important;
      text-align: center;
  }
  </code></pre>
  
  <p>But when i load the page, and inspect element on the image to know its dimensions, this is what it says:</p>
  
  <pre><code>element.style {
      height: 600px;
      width: 600px;
  }
  </code></pre>
  
  <p>Why doesnt the image inherit the width of the div? And I cant manually put the desired width of the image for some reason, so I cant do this:</p>
  
  <pre><code>#image {
   width : 330px; //manually putting width
   height: 303px; //same same which i cannot do this for some reason
  }
  </code></pre>
  
  <p>Any idea why or how to solve this?</p>
  
  <p>I all tried the solution below:</p>
  
  <p>and here is what i get from inspect element:</p>
  
  <pre><code>#image {
      height: inherit; // crossed-out
      width: inherit; // crossed-out
  }
  </code></pre>
  
  <p>Something is overwriting my image dimensions.</p>