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

Question

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

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

我正在使用bootstrap,并使用img-responsiveimgs上的类.

以下是我到目前为止所做的演示: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>

Run Code Online (Sandbox Code Playgroud)

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 */
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*ier 5

将您的HTML结构更改为:

更新的示例

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

Run Code Online (Sandbox Code Playgroud)

究其原因,元件似乎是扩大是因为有母体上填充.col-md-6元件(padding-left/ padding-right的15px).

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

归档时间：	11 年，4 月前
查看次数：	22644 次
最近记录：	7 年前