使用transform：scale在悬停时放大图像，仍然可以使图像从外部变大

Question

我如何制作它以使图像放大自身而不会使外部更大，例如这就是我想要的，我试图实现这个但它不起作用： http ： //jsfiddle.net/7vY7v/ 130 / 。 我究竟做错了什么？

我正在使用bootstrap，并在imgs上使用img-responsive类。

以下是我到目前为止所做的演示： http ： //codepen.io/anon/pen/XJzexN

码：

HTML：

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">

            <div class="row">
                <div class="col-md-6 img-wrapper">

                        <img src="https://unsplash.it/800" alt="" class="img-responsive">

                </div>
                <div class="col-md-6 img-wrapper">
                    <img src="https://unsplash.it/800" alt="" class="img-responsive">
                </div>
            </div>
            <div class="pushdown"></div>
            <div class="row">
                <div class="col-md-6 img-wrapper">
                    <img src="https://unsplash.it/800" alt="" class="img-responsive">
                </div>
                <div class="col-md-6 img-wrapper">
                    <img src="https://unsplash.it/800" alt="" class="img-responsive">
                </div>
            </div>
        </div>


        <div class="container-fluid">

            <div class="row">
                <div class="people">

                </div>
            </div>
        </div>

  </body>

</html>

CSS：

.img-wrapper {
    display: inline-block;
    overflow: hidden;
}

.img-wrapper img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    vertical-align: middle;
}

.img-wrapper img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

Answer 1

将您的HTML结构更改为：

更新的示例

<div class="col-md-6">
    <div class="img-wrapper">
        <img src="https://unsplash.it/800" alt="" class="img-responsive">
    </div>
</div>

元素似乎在扩展的原因是因为父.col-md-6元素上有padding-left （ padding-left / padding-right of 15px ）。

通过将直接父元素更改为.img-wrapper ，可以有效地替换它并隐藏溢出。

使用transform：scale在悬停时放大图像，仍然可以使图像从外部变大

问题描述

1 个解决方案

解决方案1
5 已采纳 2015-02-07 02:27:26

使用transform：scale在悬停时放大图像，仍然可以使图像从外部变大

问题描述

1 个解决方案

解决方案1 5 已采纳 2015-02-07 02:27:26

解决方案1
5 已采纳 2015-02-07 02:27:26