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件毛衣」

謝謝， Ĵ

Answer 1

如果您知道圖像的大小，你可以使用calc()在CSS中動態計算位置。

就你而言，如果圖像寬度爲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, 
    }) 
}) 

Answer 2

在我的屏幕，它是不是在中間的懸停。

如果要居中它，因爲它有position: fixed，您可以使用Absolute Centering（或固定的，在這種情況下）：

.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%; 
}