我正在尝试将响应图像放入面板中,以便保持图像的纵横比,并且图像尽可能大,这样就不会被 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;
}
最佳答案
根据您的要求,您不想剪切或裁剪图像。所以你必须从.panel-photo
中删除overflow:hidden
。然后使用下面的CSS:
.panel-photo img{
width:100%;
height: auto;
}
关于javascript - Bootstrap : Responsive Image in Panel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34733395/