[英]Bootstrap: Responsive Image in Panel
我正在尝试将响应式图像安装在面板内,以保持图像的高宽比,并且图像尽可能大,以至于没有一个被切掉。 我试图弄乱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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.