对于宽度不同的图像，保持相同的位置？

Question

我的网站上有一个照片库...这些照片与下一个，上一个，关闭按钮对话。每个next / prev事件我都会在对话框中加载一个新图像...照片的宽度不同 - 如何在同一位置加载图片？我的意思是因为图片的宽度不同，图像的位置正在改变......

Answer 1

如果使用某种对中方式，宽度的变化不会成为问题，因为它们都将正确居中。然后，您所要做的就是定位一个已知宽度的元素，该元素不会因图像而改变。

<div class="viewer">
    <img/>
</div>

.viewer{
    text-align: center;
}
.viewer img{
    margin: auto;
}

Answer 2

就个人而言，我认为你最好的选择是尝试使用每个图像大小不同的事实。创建一个过渡效果，可以放大和缩小幻灯片，以适应其中的图像大小。如果你正在寻找的话，那就会产生更顺畅，更时尚的效果。