javascript - Bootstrap : Responsive Image in Panel

Question

我正在尝试将响应图像放入面板中，以便保持图像的纵横比，并且图像尽可能大，这样就不会被 chop 。我尝试过使用CSS，但似乎没有任何效果。我将 Bootstrap 与 React.js (react-bootstrap) 一起使用。有谁知道为什么这不起作用？谢谢!

示例:如果我的面板为 200x100，则其中的图像可能为 100x100、200x50、50x100 等。

JS(渲染方法内部)

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

CSS 文件

.fixed-panel {
  min-height: 300px;
  max-height: 300px;
}
.panel-photo {
  height: 185px;
  overflow: hidden;
}

Answer 1

根据您的要求，您不想剪切或裁剪图像。所以你必须从.panel-photo中删除overflow:hidden。然后使用下面的CSS:

.panel-photo img{
    width:100%;
    height: auto;
 }