隐藏的图像溢出行为不正确

Question

我一直在为Wordpress主题使用特定的博客布局。 我已经对其进行了修改，但是在获取1920px x 550px的图像居中并隐藏溢出时遇到了问题。 此刻，图像刚刚变得捉襟见肘。

链接到相关博客： http : //goo.gl/5Id68s

码：

 .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> 

感谢您的协助！

Answer 1

将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属性使它居中。 EG margin-left: -100px 。

Answer 2

您可以通过应用margin: 0 auto;来使标题居中margin: 0 auto; 你的风格

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

如果需要使图像居中，请添加text-align: center; 到其父块元素将使图像居中，因为图像是嵌入式元素