【问题标题】: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查看工作示例

【讨论】:

    猜你喜欢
    • 2017-03-24
    • 1970-01-01
    • 1970-01-01
    • 2015-05-02
    • 1970-01-01
    • 2023-02-23
    • 1970-01-01
    • 2011-08-24
    • 1970-01-01
    相关资源
    最近更新 更多