Html 在悬停时使用变换放大图像：缩放，仍然使图像从外部变大
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28377817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zoom in on image on hover using transform: scale, still making image bigger from outside
提问by ifusion
How do I make it so the image zooms in on itself with out making the outside larger e.g this is what I want, I have tried to implement this but it doesn't work the same: http://jsfiddle.net/7vY7v/130/. What am I doing wrong?
我如何制作它以便图像放大自身而不使外部变大，例如这是我想要的，我试图实现这一点，但它不起作用：http: //jsfiddle.net/7vY7v/ 130/。我究竟做错了什么？
I am using bootstrap, and using the img-responsiveclass on the imgs aswell.
我正在使用引导程序，并img-responsive在 imgs 上使用该类。
Heres my demo of what I have done so far: http://codepen.io/anon/pen/XJzexN
这是我到目前为止所做的演示：http: //codepen.io/anon/pen/XJzexN
Code:
代码：
HTML:
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:
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 */
}
回答by Josh Crozier
Change your HTML structure to this:
将您的 HTML 结构更改为：
<div class="col-md-6">
<div class="img-wrapper">
<img src="https://unsplash.it/800" alt="" class="img-responsive">
</div>
</div>
The reason the element appeared to be expanding was because there is padding on the parent .col-md-6element (padding-left/padding-rightof 15px).
元素似乎正在扩展的原因是因为父.col-md-6元素 ( padding-left/ padding-rightof 15px)上有填充。
By changing the immediate parent element to .img-wrapper, you effectively displace this and hide the overflow.
通过将直接父元素更改为.img-wrapper，您可以有效地替换它并隐藏溢出。
