How to set the same size of blocks with images if the images are of different sizes?

Question

css

Here is an example - https://jsfiddle.net/9hhb9d7x/
Images change height and width when resolution is changed.
But one image is larger than the other, which needs to be fixed.
If you set the height of the parent block - https://jsfiddle.net/junt58e4/ , then the images will no longer stretch, as in the first option, and will only resize in width when the resolution changes.
How can I make image blocks stretch like in the first option, but have the same height as in the second one?

Answer 1

https://jsfiddle.net/Ivanq/9hhb9d7x/3/

Answer 2

Use in style:

.box{
  background-image: url(...);
  background-size: auto 100%;
  border: 1px solid #eee;
  float: left;
  height: 200px;
}