CODEWITHSUNDEEP
css
Audiophile
Audiophile

Reputation: 1060

Scale image to maximum size to fit the container

I have a wrapper of fixed sizes with the image inside of it:

.wrapper {
  background: yellowgreen;
  width: 8em;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(11em / 12);
}

.wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: calc(1em / 12) solid black;
  border-radius: calc(11em / 12);
}
This is ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/ASIO4ALL/asio4all.png" alt=""></div><br>

This is not ok:<br>
<div class="wrapper"><img src="https://audiophilesoft.ru/design/icons/go.png" alt=""></div>

I need any image to fit the wrapper - with maximum size available, keeping proportions, without cut, and I need the image border to always stick to the image contour (without any gaps between the image and the border). Now it works only for images which sizes are >= wrapper sizes, small images just don't scale. If I specify width/height instead of max-*, the border becomes fixed and doesn't stick to images contour (there is a vertical or horizontal gap between the border and the image). How to achieve this? Maybe some CSS tricks, additional wrappers? Actually object-fit works as I need, I just need the border that will stick to image.

Upvotes: 1

Views: 89

Answers (2)

Chri.s
Chri.s

Reputation: 1456

As pointed out, my previous solution wasn't what OP actually sought for, so I've updated the answer below with what I believe is a solution. This also works with display:flex.

I've added an extra div called .inner-wrap to make sure that the border exactly surrounds the image at all times and doesn't overflow the container.

.wrapper {
  background: yellowgreen;
  width: 8em;
  height: 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(11em / 12);
  overflow:hidden;
  box-sizing:border-box;
}

.wrapper img {
  max-height:100%;
  width:100%;
  display:block;
}
.inner-wrap{
  width: 100%;
  max-height: 100%;
  border:2px solid red;
  border-radius: calc(11em / 12);
  box-sizing:border-box;
  overflow:hidden;
}
This is ok:<br>
<div class="wrapper"><div class="inner-wrap"><img src="https://audiophilesoft.ru/ASIO4ALL/asio4all.png" alt=""></div></div><br>

This is ok?<br>
<div class="wrapper"><div class="inner-wrap"><img src="https://audiophilesoft.ru/design/icons/go.png" alt=""></div></div>

This is ok?<br>
<div class="wrapper"><div class="inner-wrap">
<img src="https://s-media-cache-ak0.pinimg.com/originals/aa/ca/3d/aaca3dc87cede5635530a8448dd39a58.jpg" alt=""></div></div>

Upvotes: 1

ceferrari
ceferrari

Reputation: 1687

Change width and height to max-width and max-height, respectively, in .wrapper:

And do the inverse in .wrapper img selector:

.wrapper {
    max-width: 8em;
    max-height: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: calc(1em / 12) solid black;
    border-radius: calc(11em / 12);
}
<div class="wrapper"><img src="https://images.tcdn.com.br/img/arquivos/355878/images/icons/us-flag.png?v=c4a83628611cc4338b8d08bee8d670ae" alt=""></div>

The original image is 32x16: link

Upvotes: 1

Related Questions