CSS图像在中间，即使我滚动

Question

我在这里有这个页面：http://paoladi.com/designers/

我添加了这个代码：

<style type="text/css">
.entry-content img { display: none; float:right; position: fixed; top: 36%; left: 30%; }
.entry-content p{ width:30%; font-weight:bold; margin-bottom:0px;}
</style>

即使我滚动，也要始终将图像放在页面的中间，但是我有一个小屏幕，在我的屏幕上看起来很好，我只是想知道这在更大的屏幕上会是什么样子，我能做些什么来改进这个代码吗？jQuery是一个选项吗？

要查看图像，请将鼠标悬停在"360毛衣"上

谢谢，J

Answer 1

如果知道图像大小，可以使用css中的calc()动态计算位置。

在您的情况下，如果图像宽度为200px，高度为100px；

<style type="text/css">
.entry-content img { display: none; float:right; position: fixed; top: calc(50% - 50px); left: calc(50% - 100px); }
.entry-content p{ width:30%; font-weight:bold; margin-bottom:0px;}
</style>

请参阅本页中的一些详细信息

此外，如果需要，还可以使用javascript或jQuery来更新位置。例如，将.resize()事件添加到$(window)

$(window).resize(function(){
$(".entry-content img").position({
left: $('body').width() / 2 - $(".entry-content img").width() / 2,
right: $('body').height() / 2 - $(".entry-content img").height() / 2,
})
})

Answer 2

在我的屏幕中，它不在在中间。

如果你想居中，因为它有position: fixed，你可以使用绝对居中(或者在这种情况下是固定的)：

.entry-content img {
/* Fixed centering: */
position: fixed;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
/* The following makes sure that the image will be
fully visible in small screens, but stretched: */
max-height: 100%;
max-width: 100%;
}