<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/reset.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<img src="tim.jpg" alt="Tim Berners-Lee at a computer.">
		</section>
		<section>
			<img src="tim.jpg" alt="Tim Berners-Lee at a computer.">
		</section>
	</body>
</html>
index.html
			body, section { padding: 20px; }

section {
	background-color: gold;
	height: 33vh;
}

section:not(:first-child) { margin-top: 20px;}

img {
	background-color: orange;
	height: 100%; /* Fill the parent. */
	width: 100%;
}

section:first-child img {
	object-fit: contain; /* Fit the image. */
	object-position: left top; /* Corner. */
}

section:last-child img {
	object-fit: cover; /* Cover the parent. */
	object-position: right center; /* Side. */
	overflow: clip; /* Chrome needs this to hide extra. */
}
style.css