I've been struggling to make a responsive image fit inside a panel while maintaining its aspect ratio and ensuring none of it gets cut off. I've attempted various CSS tweaks with no success. My setup involves Bootstrap along with React.js using react-bootstrap. Any insights on why this isn't working would be greatly appreciated. Thank you!
Here's an example: if my panel measures 200x100, the image inside could have dimensions of 100x100, 200x50, 50x100, and so on.
JS (within render method)
<Panel className='fixed-panel' bsStyle="info">
<div className="panel-photo">
<Image src={thumbPhotoUrl} responsive className="img-responsive center-block"/>
</div>
</Panel>
CSS file
.fixed-panel {
min-height: 300px;
max-height: 300px;
}
.panel-photo {
height: 185px;
overflow: hidden;
}