当父div隐藏溢出时，Div阴影被截止

I have a recent question wherein a certain portion of an image inside the div should only be displayed.. I modified it a bit base on my needs. Now that when I add a box-shadow on the .img-card-container, the drop shadow is being cut-off.

我有一个最近的问题，其中div中的图像的某个部分应该只显示..我根据我的需要对其进行了一些修改。现在，当我在.img-card-container上添加一个box-shadow时，阴影正在被切断。

Notice that I have an overflow:hidden on the .img-bg-container. This is to crop the background image.

请注意，我有一个溢出：隐藏在.img-bg-container上。这是裁剪背景图像。

Here's a jsfiddle.

这是一个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>

1 个解决方案

#1

i have made minor changes in your HTML structure and some CSS changes as well. Look into it.

我已经对您的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>