Question

我想使用一幅风景图片，放大到中心的地标并停留在那里。我目前的代码有一个主要问题..

这是在变焦时出现的水平条。

我希望图片的宽度为100％，但高度约为80％

HTML：

  <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>



<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/home1.css">

</head>

<body>
<div id="wrapper">

<a href="#">
    <img src="images/zoom.jpg" alt="">
</a>

</div><!--wrapper-->



</body>
</html>

CSS：

a {
    overflow:hidden;
    width:100%;

}


a img {
    text-decoration: none;
    display: block;
    width: 100%;

    float: left;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a img:hover {
    opacity: .7;
    -webkit-transform: scale(2.05,2.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(2.05,2.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;


}

我也想知道是否有一种方法可以让它在悬停完成后保持放大状态，这样另一个元素就可以出现在那一点但缩放更接近。

http://jsfiddle.net/itsnamitashetty/U4HTu/

Answer 1

将display:block;添加到a css。它会解决您的问题。演示：http://jsfiddle.net/lotusgodkk/U4HTu/1/

a {
    overflow:hidden;
    width:100%;
    display:block;
}

如何防止css缩放动画水平滚动

1 个答案: