找到你要的答案

Q:Stop images from shaking page on resizing

Q:停止图像从大小摇页

I have several images that are in a line that will resize on hover so that the user knows that the image is being selected. The problem is that when you move from one image to the next, all the rest of the images move downwards. Additionally, when moving quickly from one image to the next, the screen appears to shake. How can I fix this?

img{
  margin:10px;
}
img:hover{
  width:100px;
  height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />

http://jsfiddle.net/sgqsn618/

我有几个图像,在一行,将调整悬停,使用户知道,图像正在被选中。问题是,当你从一个图像移动到下一个,所有其余的图像向下移动。此外,当从一个图像快速移动到下一个,屏幕似乎动摇。我怎样才能解决这个问题?

img{
  margin:10px;
}
img:hover{
  width:100px;
  height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />

http://jsfiddle.net/sgqsn618/

answer1: 回答1:

To fix this, add vertical-align: top to your images. Also, to prevent the screen from looking so shaky, add a transition to your images.

img{
    margin:10px;
    vertical-align: top;
    transition: all 200ms ease;
}
img:hover{
    width:100px;
    height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />

要修复此,添加垂直对齐:顶部到您的图像。此外,为了防止屏幕看起来如此摇晃,添加过渡到您的图像。

img{
    margin:10px;
    vertical-align: top;
    transition: all 200ms ease;
}
img:hover{
    width:100px;
    height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
html  css