To achieve the perfect size, proportions, and centering of an image within a container, clever positioning is key.
For example, you can fit a 350x150px image inside a 132x132px container without any distortion using the following CSS:
.cbs-Item {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
width: 132px;
height: 132px;
}
.cbs-Item img {
max-width: 100%;
max-height: 100%;
}
<div class="cbs-Item">
<img src="http://placehold.it/350x150" />
</div>
If you prefer, you can also use background-image rather than the img tag for a cleaner implementation:
.cbs-Item {
background: #eee;
height: 132px;
width: 132px;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
}
<div class="cbs-Item" style="background-image: url('http://placehold.it/350x150');"></div>