seo Question posted in
Some basic information to get you started with this can be found here.

Display img tag like background-size: contain – SEO

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

2

Answers


  1. 0

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

    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