私は最近の質問がcertain portion of an image inside the div should only be displayed.です。私はそれを私の必要に応じて少し変更しました。今度は.img-card-container
にbox-shadow
を追加すると、ドロップシャドウが途切れています。親divのオーバーフローが隠されている場合、Divドロップシャドウがオフになっています
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>
。あなたの 'box-shadow'をはっきりと見せるために親要素に' padding'を追加することを考慮する必要があります。 –
divにはパディングを追加する必要がありますか? '.img-bg-container'にパディングを追加すると、イメージの背景が表示されます。 – basagabi
と同じ親divに 'overflow:hidden'を追加しました。あなたの 'box-shadow'と同じパディングを維持する –