Question

说我有以下代码（jsFiddle）：

CSS

.holder {
    overflow: hidden;
    width: 475px;
    height: 360px;
}
.zoooom {
    width: 475px;
    height: 360px;
    transition: all 1s ease;
}
.zoooom:hover {
    width: 575px;
    height: 460px;
}

HTML

<div class="holder">
    <img class="zoooom" src="../example_image.png" />
</div>

图像放大很好。但是，对于响应的基于％的布局，这是没有用的，因为包含<div>拉伸以适合放大的图像。（jsFiddle）

有什么办法可以纠正吗？

直播示例

查看http://www.matthewpeckham.com/vivid-exposure/上的图片网格，以便更好地了解我想要的内容。此页面是Bootstrapped，图片需要保持在col-xs-2 div的范围内。

<div class="container-fluid">
    <div class="row">       
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <a href="#">
                <img class="img-responsive home-image" src="images/<?=$filename?>" alt="">
            </a>
        </div>
    </div>
</div>

.home-image {
    -webkit-transition: all .3s ease;
}

.home-image:hover {
    max-width: 120% !important;
}

Answer 1

保持外部固定器固定。

  .holder {
overflow: hidden;
width: 238px;
height: 180px;
padding: 0px;
margin: 0px;}

.zoooom {
width: 100%;
height: 100%;
transition: all 1s ease;}

.zoooom:hover {
width: 120%;
height: 120%;}

Incase外部容器的百分比尝试webkit规模：

.holder {
    overflow: hidden; 
    width: 50%;
}
.zoooom {
    width: 100%;
    height: 100%;
    transition: all 1s ease;
}
.zoooom:hover {
    -webkit-transform: scale(1.5);
}

希望这有帮助。

干杯!!

Answer 2

DEMO

完全响应（尊重引导网格类），并且不要求您在网格元素上设置任何固定的高度或宽度值。

<强> CSS：

/*Remove the padding from the cols so there are no gaps in the "portfolio"*/
.portfolio [class^="col"] {
    padding: 0;
}
.wrapper {
    position: relative;
    padding-bottom: 100%;
    height: 0;
}
.inside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
}
img:hover {
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
}
img {
    width: 100%;
    transition: all .5s ease;
}

<强> HTML：

<div class="container-fluid">
    <div class="row portfolio">       
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/350/350" />
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/360/360" />
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/370/370" />
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/380/380" />
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/390/390" />
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-sm-4 col-xs-6">
            <div class="wrapper">
                <div class="inside">
                    <img src="http://placekitten.com/410/410" />
                </div>
            </div>
        </div>
    </div>
</div>

工作原理： 与Bootstrap中的响应式嵌入类非常相似，它使用内在比率来使用包装器和内部类来维持容器的1：1比率。包装类的高度明确设置为0，padding-bottom设置为100％。内部类然后使用绝对定位，因此它不受其父级具有0高度的影响，但百分比可以应用于其高度，因为父级不仅具有快速高度值，而且由于padding-bottom属性它还具有可计算的高度被设定为100％。

将overflow属性设置为隐藏在内部类上，您可以使用缩放在悬停时转换图像。

CSS3转换（缩放）使用％s定义的图像

2 个答案:

DEMO