JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<div class="crop-container">
    <img class="dog" src="" alt="img">
</div>

CSS

.crop-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.crop-container img {
    margin: -200px 0 0 -100px;
    border: 1px dashed green;
  
 /*  height: 300px; */
  object-fit: contain; 
 /*  object-fit: scale-down; */
}

JavaScript

// =============== image
			var imgUrl = "https://images.drivebc.ca/bchighwaycam/pub/cameras/11.jpg"
			placeDog = "https://place.dog/300/200"
			randomDog = "https://random.dog/woof.json?filter=mp4,webm/" // https://github.com/AdenFlorian/random.dog
			dogCeo = "https://dog.ceo/api/breeds/image/random"
			//document.querySelector(".place-dog").src=placeDog;
			//document.querySelector(".myImgClass").src=imgUrl;
			async function foo(whichDog) {
				let obj;
				const res = await fetch(whichDog)
				obj = await res.json();
				
				//console.log(obj)
				console.log(obj.url);
				imgUrl = obj.url;
				document.querySelector(".dog").src = imgUrl;
			}
			//document.querySelector(".credit").src="I'm a Little Teapot";
			//document.getElementById("credit").innerHTML = "I'm a little teapot";
			foo(randomDog);