如何解决引导图像缩放？答案

【问题标题】：How to solve bootstrap image zoom?如何解决引导图像缩放？
【发布时间】：2017-10-31 23:32:04
【问题描述】：

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

我正在尝试使缩略图跟随背景缩放。

我无法摆脱黑色边框。

请帮帮我！

谢谢！

【问题讨论】：

您没有分享任何代码，您附加的图像中没有代码，您只是导入CSS样式表，没有代码
我已经添加代码
请将您的代码与问题内联。为什么要费心点击外部链接来帮助您？
您的代码链接无效

标签： javascript css html twitter-bootstrap bootstrap-4

【解决方案1】：

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

【讨论】：

欢迎来到 SO！很高兴看到人们第一次回答！我建议将来使用完整的句子，并在您的建议中更具体一点。另外，说“试试看”也不太礼貌。

【解决方案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查看工作示例

【讨论】：