使用變換縮放懸停上的圖像：縮放，仍然使圖像變大

如何使圖像變大，使外部變大，例如這是我想要的，我試圖實現這但它不會工作相同：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 */ 
}

來源

2015-02-07 ifusion

更改您的HTML結構，這：

Updated Example

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

原因的元件似乎是擴大是因爲有填充父.col-md-6元件（的15pxpadding-left/padding-right）上。

通過將直接父元素更改爲.img-wrapper，可以有效地取代並隱藏溢出。

來源

2015-02-07 02:27:26

完美！我認爲這一定很容易，我會盡快接受你的答案:)謝謝！ – ifusion 2015-02-07 02:30:01

使用變換縮放懸停上的圖像：縮放，仍然使圖像變大

回答

相關問題