make your images look non squished when not using image backgrounds v2

HTML

<div class='demo-darken-shared demo-darken-img'></div>
<div>
	<img src='https://kruxor.com/images/pexels-photo-546819.jpeg' class='demo-squished-img'>
</div>
<div>
	<img src='https://kruxor.com/images/pexels-photo-546819.jpeg' class='demo-non-squished-img'>
</div>
<div>
	<img src='https://kruxor.com/images/pexels-photo-546819.jpeg' class='animated-img'>
</div>

CSS

.demo-darken-shared {
	height:300px;
	width:300px;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;		
	font-size:20px;
	font-weight:bold;
	text-shadow:0px 1px 2px rgba(0,0,0,0.8);
	text-align: center;
}
.demo-darken-img {
	background:url(https://kruxor.com/images/pexels-photo-546819.jpeg) center no-repeat;
	background-size:cover;
}
.demo-squished-img {
   	height: 300px;
    width: 200px;
}
.demo-non-squished-img {
   	height: 300px;
    object-fit: cover;
    width: 200px;
}
	.animated-img {
		transition: all 0.3s;
		animation: imgwidth 5s infinite;
		object-fit: cover;
	}
	@keyframes imgwidth {
	    0%   {width: 50px; height: 300px;}
	    50%   {width: 100%; height: 300px;}
	    100% {width: 50px; height: 300px;}
	}