javascript - 当父 div 溢出隐藏时，div 投影被切断

Question

我最近有一个问题，其中 certain portion of an image inside the div should only be displayed. .我根据自己的需要对其进行了一些修改。现在，当我在 .img-card-container 上添加 box-shadow 时，阴影被 chop 了。

请注意，我在 .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>