How to adjust image in the container

Navigation
0

I have a 1220x780 image and I want to put it in a 341x192 container, how do I make it appear adjusted, centered, in "miniature", I'm using 

 max-width: ;
 max-height:;
 width: auto;
 height: auto;

But it does not fit horizontally

    
asked by anonymous 25.06.2018 / 19:31

1 answer

1

Let's take this image for example.:

Ithas512x512,soletsputitinsidea256x128container

.box {
  float: left;
  width: 256px;
  height: 128px;
  margin: 10px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
}

.bg {
  background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="box">
  <div class="bg"></div>
</div>

<div class="box">
  <img src="https://image.flaticon.com/icons/png/512/944/944939.png"class="img" />
</div>

That is, we can do this placement using background-size: cover; background-position: center; for background images or object-fit: cover; for images.

Now if you want to keep the aspect ratio and not cut it, you can use contain instead of cover . 

.box {
  float: left;
  width: 256px;
  height: 128px;
  margin: 5px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
}

.bg {
  background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
<div class="box">
  <div class="bg"></div>
</div>

<div class="box">
  <img src="https://image.flaticon.com/icons/png/512/944/944939.png"class="img" />
</div>
    
25.06.2018 / 19:39
Problems displaying date in appropriate format [duplicate] Stone-paper-scissors-lizard-Spock on Uri Online Judge ex. 1873, but he does not accept