Question

我对编码很陌生，而且我目前正在一个包含图片的网页上工作。我想让这些图像在页面上显示得很小，但是当它们悬停在它们上面时会让它们放大。我正在使用的这个代码正在运行，但是我似乎无法解决这个小问题。这是我使用的CSS代码：

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image:hover img {
    width: 200%;
    height: 200%;
}

我遇到的问题是，如果我不在CSS中使用浮动功能，如果你悬停在与图像相同的垂直高度，图像也会被放大，而不是必须悬停在同一水平位置，这很烦人。我不想让它浮动：离开是因为这会干扰我页面的其余部分。我真的很喜欢这方面的帮助，因为无论我做什么，它似乎都无法解决问题。在此先感谢帮助我。

编辑：HTML代码：

<div id = "image">
    <img src = "image.png" alt = "image example">
</div>

Answer 1

总的来说。不要使用ID标签作为选择器，而是使用类。会抓住你...... read more

让你将图像缩放到包裹它的div，然后控制包装div。而且，你不应该没有问题。

.image-wrapper img {
  max-width: 100%;
}
.image-wrapper {
  width: 100%;
  -webkit-transition: width 1s, height 1s;
  transition: width 1s, height 1s;
}
.image-wrapper:hover {
  width: 200%;
  height: 200%;
}

Answer 2

从

更改代码

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image:hover img {
    width: 200%;
    height: 200%;
}

到

#image img {
    -webkit-transition: width 1s, height 1s;
    transition: width 1s, height 1s;
}
#image img:hover {
    width: 200%;
    height: 200%;
}

解决了这个问题。谢谢你的帮助（特别是@Ariel）！

CSS在悬停时放大图像

2 个答案: