我最近有一个问题certain portion of an image inside the div should only be displayed.。我根据自己的需要对其进行了修改。现在，当我在box-shadow上添加.img-card-container时，投影正在被切断。
请注意overflow:hidden上有.img-bg-container。这是裁剪背景图片。
这里是jsfiddle。
.img-sub {
height: 150px;
overflow: hidden;
width: 100%;
display: block;
position: relative;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -50%;
width: auto;
}
.row.next-row {
padding-top: 30px;
}
.img-card-caption {
background-color: #fff;
min-height: 60px;
max-height: 60px;
padding: 10px;
}
.img-card-caption h3 {
font-size: 1em;
margin: 0;
padding: 0;
}
.img-card-caption span {
color: #999;
}
.img-bg {
background-color: #fff;
height: 100%;
width: 100%;
position: relative;
z-index: -10;
}
.img-bg img {
position: absolute;
height: auto;
width: 100%;
left: -100%;
right: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
z-index: -10;
}
.img-bg-container {
display: inline-block;
overflow: hidden;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -50%;
right: -50%;
width: auto;
}
.img-card-container {
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
}<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row grid-container">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<div class="row img-container img-featured">
<div class="col-md-12">
<a href="/posts/1">
<img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
</div>
<div class="row next-row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob Squarepants</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
我对你的HTML结构和一些CSS更改进行了一些细微的更改。看看吧。
.img-sub {
height: 150px;
overflow: hidden;
width: 100%;
display: block;
position: relative;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -50%;
width: auto;
}
.row.next-row {
padding-top: 30px;
}
.img-card-caption {
background-color: #fff;
min-height: 60px;
max-height: 60px;
padding: 10px;
}
.img-card-caption h3 {
font-size: 1em;
margin: 0;
padding: 0;
}
.img-card-caption span {
color: #999;
}
.img-bg {
background-color: #fff;
height: 150px;
/* anyhow you have given fixed height in other divs */
width: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -10;
overflow: hidden;
/* prevent image from going out */
}
.img-bg img {
position: absolute;
height: auto;
width: 100%;
left: -100%;
right: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
z-index: -10;
}
.img-bg-container {
margin-bottom: 15px;
position: relative;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -50%;
right: -50%;
width: auto;
}
.img-card-container {
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row grid-container">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<div class="row img-container img-featured">
<div class="col-md-12">
<a href="/posts/1">
<img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" />
</a>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
</div>
<div class="row next-row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="img-bg-container">
<div class="img-bg">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</div>
<div class="img-card-container">
<div class="img-card-item">
<a href="/posts/1" class="img-sub">
<img src="http://vignette1.wikia.nocookie.net/spongebob/images/7/74/SpongeBob_Season_9.jpg/revision/latest/scale-to-width-down/150?cb=20150104004114" />
</a>
</div>
<div class="img-card-caption">
<h3><a href="#">This is the video title</a></h3>
<span>Spongebob</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>