Bootstrap：面板中的響應式圖像

Question

我正在嘗試將響應式圖像安裝在面板內，以保持圖像的高寬比，並且圖像盡可能大，以至於沒有一個被切掉。 我試圖弄亂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;
 }