div div陰影被截斷當父div有溢出隱藏

Question

我有一個最近的問題，其中一個certain portion of an image inside the div should only be displayed.。我根據自己的需要對其進行了修改。現在，當我在.img-card-container上添加box-shadow時，投影正在切斷。

請注意，我在.img-bg-container上有overflow:hidden。這是裁剪背景圖像。

這是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>

Answer 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>