can you set all image heights to match with css no stretching

object-fit: cover;

object-position: right bottom;

HTML

<h3>Images that are all over the place</h3>
<p>images that do not look nice and formatted in a grid.</p>
<div class="image-heights">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
</div>
<hr>
<h3>Add object fit and apply a height and width</h3>
<p>add a class to these images and they all line up nicely with no stretching of the images</p>
<div class="nice-heights">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
</div>

CSS

.nice-heights img {
	height:200px;
  	width:200px;
  	object-fit: cover;
  	object-position: left top;
  	margin-bottom:5px;
  	margin-right:5px;
}

Images that are all over the place

images that do not look nice and formatted in a grid.

---

Add object fit and apply a height and width

add a class to these images and they all line up nicely with no stretching of the images