Align vertical/horizontal image inside a div(which is inside a container) where the image sizes and ratio varies, and have pading

Question

I want to align images vertical where the image ratio varies, the image can be bigger or not than the content and also have padding;

I tried solutions that I found here, but I didn't found something that covers everything; I need to work in IE9;10

.thumb {
border: 2px solid #4FA738;
border-radius: 0.1875rem;
cursor: pointer;
display: inline-block;
font: 0/0 a;
margin: 0 0.5rem 0 0;
transition: 0.2s;
text-align: center;
}

.thumb img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    vertical-align:middle;
    margin:auto;
    padding: 2px;
}

 <div class="thumbs">
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/200x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/140x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/50x50">
  </div>
   <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/150x450">
  </div>
</div>

no, at least 2px, just not close to the border, like a minimum margin — user3541631, Apr 20 '18 at 15:57
Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) — Taki, Apr 20 '18 at 16:08

VXp · Accepted Answer · 2018-04-20T17:03:50.743

The first pure CSS way to achieve the desired result is to do it with the background-image & co. properties:

.thumb {
  border: 2px solid #4FA738;
  box-shadow: inset 0 0 0 2px #fff; /* 2px margin/padding trick */
  border-radius: 0.1875rem;
  cursor: pointer;
  display: inline-block;
  font: 0/0 a;
  margin: 0 0.5rem 0 0;
  transition: 0.2s;
  text-align: center;
  width: 70px;
  height: 70px;
}

.thumb {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* keeps / "contains" the ratio */
}

.thumb:first-child {background-image: url(http://via.placeholder.com/350x150)}
.thumb:nth-child(2) {background-image: url(http://via.placeholder.com/200x100)}
.thumb:nth-child(3) {background-image: url(http://via.placeholder.com/140x100)}
.thumb:nth-child(4) {background-image: url(http://via.placeholder.com/50x50)}
.thumb:last-child {background-image: url(http://via.placeholder.com/150x450)}

<div class="thumbs">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

And the second one where you have to sacrifice the border-radius effect:

.thumb {
  border: 2px solid #fff;
  outline: 2px solid #4FA738;
  border-radius: 0.1875rem;
  cursor: pointer;
  display: inline-block;
  font: 0/0 a;
  margin: 0 0.5rem 0 0;
  transition: 0.2s;
  text-align: center;
  position: relative;
}

.thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

<div class="thumbs">
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/350x150">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/200x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/140x100">
  </div>
  <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/50x50">
  </div>
   <div class="thumb" style="width:70px;height:70px;">
    <img src="http://via.placeholder.com/150x450">
  </div>
</div>

the issue with your solution is that you change the ratio of the image, so the image will not look ok; I want to keep the ratio and center — user3541631, Apr 20 '18 at 15:55
the thumbs are generate by backend, so the only way to use the solution is to force it a inline css; but backend can generate/choose random many, so I don't know if is optimal — user3541631, Apr 20 '18 at 16:51

Align vertical/horizontal image inside a div(which is inside a container) where the image sizes and ratio varies, and have pading

1 Answers1