jquery - 即使我滚动，中间的 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>

请参阅 this page 中的一些详细信息

此外，如果需要，您还可以使用 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,
    })
})