Question

我查看this code sample以放大图片。

我尝试添加'放大'类bootstrap3幻灯片轮播项目。：

<div class="item active">
   <div class="item-item col-md-3 col-sm-4">
     <a href="#">
       <img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
    </a>
  </div>
</div>

的CSS：

.enlarge {
    width: 100%;
    float: left;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.enlarge:hover {
    width: 120%;
       -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  cursor: pointer;
}

您可以看到更改here in jsfiddle。

但它不能放大。我可以这样做吗？

Answer 1

问题是，如果你想增加图像的宽度来假设120%，那么增加将完全正常。但是bootstrap.min.css具有img元素的以下样式属性。

<强> CSS：

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

因此，如果添加该类，则无法扩展到100%以上。

.carousel .img-responsive{
  max-width:none;
}

它将覆盖引导程序中的CSS，如果您因任何原因无法查看可以添加!important的更改，则会优先覆盖这些更改。

.carousel .img-responsive{
  max-width:none !important;
}

这适用于旋转木马下的所有图像。

如果您只想为一个轮播指定，您可以指定轮播的ID，例如

#myCarousel .img-responsive{
  max-width:none;
}

这是一份有效的DEMO。

JSFiddle Demo

悬停在滑块bootstrap3幻灯片旋转木马上放大图像

1 个答案: