[英]Why does my image go outside of the bootstrap grid?
我使用Bootstrap 4创建了3列网格,其中包含一些文本和图像。
我注意到,尽管我的图像分配了img-fluid
类,但图像在div之外溢出。
谁能解释这个原因?
的HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
的CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
在实际页面上可能更容易看到,请查看CodePen 。
因为您已将父div的高度设置为300px
,所以如果删除高度,它会起作用。 或者您可以按照@august建议将img-fluid
的高度设置为300px
:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
或者,您可以像这样保持高度并停止图像溢出:
.blue-bg
{
overflow: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.