Question

我坚持使用特定的博客布局来制作Wordpress主题。我修改了它但是在将1920px到550px的图像放在中心并隐藏溢出时遇到了问题。目前，图像正在变得紧张。

代码：

.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或包含图片的任何内容。图像无法溢出。

＆＃13;

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

＆＃13;

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

＆＃13;

注意：您可以使用margin属性的负值来使其居中。 E.G margin-left: -100px。

Answer 2

您可以将margin: 0 auto;应用于您的风格

，从而使标题居中

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

如果您需要居中图像，将text-align: center;添加到其父块元素会使图像居中，因为图像是内联元素

图像溢出隐藏不正常

2 个答案: