圖像溢出隱藏不正確行爲

我被困在使用Wordpress主題的特定博客佈局。我已經修改了它，但是在獲取1920x550像素的圖片時遇到問題，無法將圖片集中並隱藏溢出。目前，形象正在變得捉襟見肘。圖像溢出隱藏不正確行爲

代碼：

.template-blog .big-preview { 
 
    padding: 0 0 0px 0; 
 
    width: 1920px; 
 
} 
 

 
.template-blog .big-preview img { 
 
    width: 100%; 
 
    height: 510px; 
 
    background-position: center center; 
 
    overflow: hidden; 
 
}

<div class="big-preview single-big"> 
 

 
    <a href="sample.com" title="Sample Image" class="lightbox-added"> 
 

 
    <img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image"> 
 

 
    </a> 
 
</div>

欣賞幫助！

來源

2015-02-11 Delto

將overflow和它的值應用於.big-preview或其他任何包含圖像的值。圖像不能自行溢出。

.big-preview { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 510px; 
 
    } 
 

 
.big-preview img { 
 
    width: 100%; 
 
    height: auto; 
 
    
 
}

<div class="big-preview single-big"> 
 

 
    <a href="sample.com" title="Sample Image" class="lightbox-added"> 
 

 
    <img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image"> 
 

 
    </a> 
 
</div>

注：您可以使用margin屬性的負值得到它的中心。 E.G margin-left: -100px。

來源

2015-02-11 18:40:25

我試過你的解決方案，我相信這是我原來的。它仍在延伸圖像。這裏是直接鏈接到博客，這可能會對你更有幫助：http://goo.gl/5Id68s你會看到圖像沒有伸展，但也沒有集中。謝謝！ – Delto 2015-02-11 19:36:07

對不起，我沒有爲我工作。你能提供一個小提琴嗎？如果我將其設置爲％，則視圖會隨着視口更改而伸出形狀。我希望它只是將圖像居中，並將圖像保持在1920x550的靜態尺寸。如果這是不可能的，我可能只需要使用幾種介質尺寸來確定最佳的負邊距（我不喜歡這樣做）。再次感謝！ – Delto 2015-02-11 21:14:32

隨着窗口縮小，圖像高度變爲403px而不是510px。在1920 x 1080的顯示器上，您的代碼工作得非常好。但是，圖片保持相同的長寬比，並縮小視口時縮小，而不是保持居中和裁剪。 – Delto 2015-02-11 23:25:00

您可以通過應用margin: 0 auto;你的風格居中你的頭

#top .fullsize .template-blog .big-preview { 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 0; 
    width: 1920px; 
}

如果您需要到中心的形象，增加text-align: center;其父塊元素將圍繞圖像作爲圖像是內聯元素

來源

2015-02-11 20:01:50 adriano66

感謝您的評論。這不幸的是沒有爲我工作。你可以看看我發佈在我原來的文章中的博客文章鏈接，看看你能否正常工作？ – Delto 2015-02-11 20:21:50

我不確定你想要達到什麼效果，發佈預期結果的圖片會使它更容易。從上面的代碼中裁剪和居中的標題看起來像這樣http://i.imgur.com/MBehp68.jpg?1 – adriano66 2015-02-11 21:07:12

圖像溢出隱藏不正確行爲

回答

相關問題