1

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 (react-bootstrap). Does anyone have any ideas about why this is not working? Thanks!

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

JS (inside 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;
}
felix_xiao
  • 1,608
  • 5
  • 21
  • 29
  • You should [read up on this SO post](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) – crazymatt Jan 12 '16 at 00:35

1 Answers1

0

As your requirement, you want't cut or crop you image. so you have to removeoverflow:hidden from .panel-photo. then use this css below: 

.panel-photo img{
    width:100%;
    height: auto;
 }
Sarower Jahan
  • 1,445
  • 1
  • 13
  • 20