我正在尝试将响应式图像安装在面板内部,以保持图像的高宽比,并且图像尽可能大,以至于没有一个被切掉。我试图弄乱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;
}
最佳答案
根据您的要求,您不希望剪切或裁剪图像。因此您必须从overflow:hidden
中删除.panel-photo
。然后在下面使用此CSS:
.panel-photo img{
width:100%;
height: auto;
}