JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-wrapper" style="max-width: 608px; ">
	<div style="padding-bottom: 49.34%; ">
		<img src="http://met.live.mediaspanonline.com/assets/31069/example-608web_w608.jpg" style="max-height: 300px;" />
	</div>
</div>

CSS

.image-wrapper {
	margin: 15px auto;
    page-break-inside: avoid;
}
.image-wrapper div {
    position: relative;
    height: 0;
    overflow: hidden;
}
.image-wrapper div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}