Как сделать так, чтобы все изображения соответствовали / одинакового размера внутри div и отзывчивыми

Question

Изображение: (https://i.stack.imgur.com/VAGy0.jpg) 1 Все мои изображения имеют разный размер (ширина / высота)Я хочу, чтобы все мои изображения соответствовали и отзывчивы внутри div, даже размером width:100%+ Я могу использовать overflow:hidden, чтобы скрыть некоторые части, но я хочу сохранить все то же самое height, чтобы сделать его равно и по-прежнему отзывчиво! как высота автоматически (height:auto)Я хочу использовать этот код <div><img src=".."/></div> Я не хочу использовать / изменить код на стиль background: url('..'); или любой flex или любой object-fit:...; или использовать любой javascript Изображение: (https://i.stack.imgur.com/Ltuef.jpg) 2 Изображение: (https://i.stack.imgur.com/7VFFP.jpg) 3

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

<div>
  <img src="https://placekitten.com/g/400/500"> Text(1)
</div>



<div>
  <img src="https://justifiedgrid.com/wp-content/gallery/life/biking/137646854.jpg"> Text(2)
</div>


<div>
  <img src="http://centraltibetanreliefcommittee.org/doh/photo-gallery/good-sliders/MenuCool5/images/image-slider-1.jpg"> Text(3)
</div>


<div>
 <img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/_jcr_content/mainParsys/hero/image.adapt.1663.medium.jpg"> Text(4)
</div>

Answer 1

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
  height: 150px;
  width: 150px;
  object-fit:cover;
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}

<div>
  <img src="https://placekitten.com/g/400/500"> Text(1)
</div>



<div>
  <img src="https://justifiedgrid.com/wp-content/gallery/life/biking/137646854.jpg"> Text(2)
</div>


<div>
  <img src="http://centraltibetanreliefcommittee.org/doh/photo-gallery/good-sliders/MenuCool5/images/image-slider-1.jpg"> Text(3)
</div>


<div>
 <img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/_jcr_content/mainParsys/hero/image.adapt.1663.medium.jpg"> Text(4)
</div>