Как сделать чтобы картинки не деформировались по размерам?

Question

[Antonio09]

https://jsfiddle.net/cdk14pm2/

Comments

[ProjectSoft]

https://webref.ru/css/object-fit

Answer 1

[xmoonlight]

cover

Answer 2

[Михаил]

<div class="wrap">
  <div class="item">
    <div class="image image-1">
    </div>
    <h4>shdfhd</h4>
  </div>
  <div class="item">
    <div class="image image-2">
      
    </div>
    <h4>shdfhd</h4>
  </div>
</div>

.wrap {
  display: flex;
  margin: 0 -20px;
}

.item {
  width: 50%;
  margin: 0 20px;
}

* {
  box-sizing: border-box;
}

.image {
  height: 370px;
  background-size: cover;
  background-position: center center;
}
.image-1{
  background-image: url('https://klike.net/uploads/posts/2019-01/1547365376_1.jpg');
}
.image-2{
  background-image: url('https://klike.net/uploads/posts/2019-01/medium/1547365386_2.jpg');
}