Question

我需要放大整个页面，使其看起来像this。

我知道我可以使用以下css在悬停时执行此操作：

.cycle-slideshow img:hover {
   transform: scale(1.25);
   transition: 20s;
}

但我不确定如何在页面加载时执行此操作，而不会放大图像本身。会很感激一些建议。提前谢谢！

Answer 1

您必须使用关键帧使其放大。

<强> CSS：

@keyframes imageAnimation {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.25);
    }
}

然后你只需要在任何地方调用动画：

#image-container {
    width: 600px;
    overflow: hidden;
}    
#myImage {
    animation: imageAnimation 20s infinite alternate;
    width: 600px;
}

HTML：

<div id="image-container">
    <img id="myImage" src="myimage.jpg" alt="Image">
</div>

这是一个有效的FIDDLE。您可以详细了解关键帧及其工作原理here。

Answer 2

您需要将图像放在div中，然后隐藏div的溢出，请参阅此演示

#container{
  height: 400px;
  width: 800px;
  overflow:hidden;
}
img{
  transition: 40s;
}
#container:hover img{
  transform: scale(2, 2)
}

<div id="container">
  <img src="http://www.schuchmann-wines.com/travel/wp-content/uploads/sites/5/2015/08/kazbegibackpack.jpg" alt="" height="400" width="800" />
</div>

无法弄清楚如何正确放大整个网页

2 个答案: