skip to Main Content

Is it possible to get a similar effect like background-size: contain with an img tag?

I want to display product pictures inside a fixed width/height div container, that have various dimensions (square, portrait, landscape). The pictures should

  • Always display the whole image, nothing should be cropped
  • Be aligned horizontally and vertically centered

This is, what background-size: contain does. Unfortunately I have to use an img tag (vor various reasons, going from the framework I use to SEO stuff).

In this plnkr you can see the problems and how it should look like (using background-size) http://plnkr.co/edit/k9Nv4ELoZgYCaQfVuSDQ?p=preview

  1. Looks good
  2. Should be centered vertically
  3. Is cropped, but should display 100% of its height

CSS:

.product {
  background-color: green;
  border: 1px solid blue;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin-bottom: 20px;
}

.product img {
  width: 100%;
}

Note: Somehow I can’t insert HTML tags, it displays the images not the
source code. Please have a look into the plnkr.

EDIT:

  • This should work with CSS only, no JS.
  • Support for all modern browsers, including IE 10

2

Answers


  1. Try to add this css:

    .product img {
      max-width: 200px;
      max-height:200px;
      width:auto;
      height:auto;
      margin: 0 auto;
      display: block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    
    Login or Signup to reply.
  2. You can do it like this by setting position: relative to the .product and position: absolute with other formatting to the .product img. Please check the fiddle below.

    .product-css {
      background-color: red;
      border: 1px solid blue;
      width: 200px;
      height: 200px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin-bottom: 20px;
    }
    .product {
      background-color: green;
      border: 1px solid blue;
      width: 200px;
      height: 200px;
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
    }
    .product img {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: -100%;
      bottom: -100%;
      left: -100%;
      right: -100%;
      margin: auto;
    }
    <h2>With img tag</h2> 1.
    <div class="product">
      <img src="http://keentype.com/post-images/wineBottles/vine-bottles-post.jpg">
    </div>
    
    2.
    <div class="product">
      <img src="https://0.s3.envato.com/files/149175458/wine_bottle_mockup_05.jpg">
    </div>
    
    3.
    <div class="product">
      <img src="http://www.designer-daily.com/wp-content/uploads/2009/02/boxhead-wine.jpg">
    </div>
    
    <hr>
    
    <h2>Desired behaviour (with background-image)</h2>
    
    <div class="product-css" style="background-image: url(http://keentype.com/post-images/wineBottles/vine-bottles-post.jpg)">
    </div>
    
    <div class="product-css" style="background-image: url(https://0.s3.envato.com/files/149175458/wine_bottle_mockup_05.jpg)">
    </div>
    
    <div class="product-css" style="background-image: url(http://www.designer-daily.com/wp-content/uploads/2009/02/boxhead-wine.jpg)">
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search