CODEWITHSUNDEEP
htmlcss
Delto
Delto

Reputation: 331

Image overflow hidden not behaving correctly

I'm stuck using a specific blog layout for a Wordpress theme. I have modified it but am having issues getting a 1920px by 550px image to center and hide the overflow. At the moment, the image is just becoming stretched.

Link to the blog in question: http://goo.gl/5Id68s

Code:

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

Appreciate the assistance!

Upvotes: 0

Views: 84

Answers (2)

adriano66
adriano66

Reputation: 599

You can center your header by applying margin: 0 auto; to your style

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

If you need to center the image, adding text-align: center; to its parent block element will center the image as images are inline elements

Upvotes: 0

Sleek Geek
Sleek Geek

Reputation: 4686

Apply the overflow and its value to .big-preview or whatever that contains the image instead. The Image can't overflow itself. 

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

Note: You can use negative values of margin property to get it to center. E.G margin-left: -100px.

Upvotes: 2

Related Questions