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

根据您的要求，您不希望剪切或裁剪图像。因此，您必须从overflow:hidden中删除.panel-photo。然后使用下面的css：

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

Bootstrap：面板中的响应式图像

1 个答案: