Bootstrap: Responsive Image in Panel
<p>I am trying to fit a responsive image inside a panel so that the aspect ratio of the image is maintained, and the image is as big as possible so that none of it is cut off. I've tried to mess around with CSS but nothing seems to do the trick. I am using Bootstrap with React.js (<code>react-bootstrap</code>). Does anyone have any ideas about why this is not working? Thanks!</p>

<p>An example: if my panel is 200x100, an image inside it could be 100x100, 200x50, 50x100, etc.</p>

<p>JS (inside render method)</p>

<pre><code>&lt;Panel className='fixed-panel' bsStyle="info"&gt;
  &lt;div className="panel-photo"&gt;
    &lt;Image src={thumbPhotoUrl} responsive className="img-responsive center-block"/&gt;
  &lt;/div&gt;
&lt;/Panel&gt;
</code></pre>

<p>CSS file</p>

<pre><code>.fixed-panel {
  min-height: 300px;
  max-height: 300px;
}
.panel-photo {
  height: 185px;
  overflow: hidden;
}
</code></pre>