如何解决bootstrap图像缩放？

Question

我的代码： http://dwz.cn/6LyQoG

我试图让缩略图跟随背景缩放。

我无法摆脱黑色边框。

请帮助我！

谢谢！

Answer 1

让您的缩略图响应。 css属性.img-responsive使图像响应（将很好地缩放到父元素）。

Answer 2

这是一个可行的示例

这是html

<p>Background image:</p>

<div class="zoom-bg"></div>

<p>Using nested image and <code>object-fit</code>:</p>

<div class="zoom-img">
  <img src="https://placeimg.com/300/200/arch">
</div>

这是css

.zoom-bg {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-bg:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://placeimg.com/300/200/nature) no-repeat center;
  background-size: cover;
  transition: all .3s ease-in-out;
}

.zoom-bg:hover:before {
  transform: scale(1.2);
}

.zoom-img {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-img > img {  
  object-fit: cover;
    width: 100%;
    height: 100%;
  transition: all .3s ease-in-out;
}

.zoom-img:hover > img {
  transform: scale(1.2);
}

在codepen

中查看工作示例