Есть следующая рамка 4x3 для изображений:
.image {
width: 100%;
}
.image .image-wrapper {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e7e7e7;
padding: 2px;
border-radius: 2px;
}
.image .image-wrapper.service {
margin: 5px auto;
height: 180px;
width: 240px;
}
.image .image-wrapper img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
<div class="image">
<div class="image-wrapper service">
<img src="//via.placeholder.com/100x200" />
</div>
</div>
<div class="image">
<div class="image-wrapper service">
<img src="//via.placeholder.com/100x100" />
</div>
</div>
<div class="image">
<div class="image-wrapper service">
<img src="//via.placeholder.com/200x100" />
</div>
</div>
Но тут такая ситуация что если изображение меньше, то он центруется, а если больше то подгоняется под пропорции.
Как мне сделать так чтобы маленькие изображения внутри рамки увеличились и подогнались под размер заданной 4x3 рамки не изменив пропорции?