Example of making HTML image tags act like CSS background images

styles.css

/* 
 * Note: you will need to add width and height to your container elements. 
 * These classes are designed to be helpers to get add the styles needed.
 */

/* Set common styles for the container elements */
.img-cover,
.img-contain,
.img-circle {
    position: relative;
    overflow: hidden;
}

/* Set common styles for the images */
.img-cover img,
.img-contain img,
.img-circle img {
    position: absolute;
    /* vertical and horizontal center */
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

/* Set specific styles for img-cover */
.img-cover img {
    height: 100%;
    width: auto;
    max-width: none;
}
.img-cover img.portrait {
    height: auto;
    width: 100%;
}

/* Set specific styles for img-contain */
.img-contain img {
    height: auto;
    width: 100%;
}
img.portrait {
    height: 100%;
    width: auto;
}

/* Set specific styles for img-circle */
.img-circle {
	border-radius: 50%;
    /* fixes overflow:hidden bug in Chrome/Opera */
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-webkit-clip-path: circle(50%);
}
.img-circle:before {
    /* Makes sure the element is a square */
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.img-circle img {
	height: 100%;
	width: auto;
	max-width: none;
	/* fixes border radius bug in Chrome */
	-webkit-clip-path: circle(50%);
}
.img-circle img.portrait {
	height: auto;
	width: 100%;
}

template.php

<?php while (have_posts()) : the_post(); ?>

	<?php // Example of .img-cover usage ?>
	<div class="img-cover">
		<?php if ( has_post_thumbnail() ) {
			// First, get the image
			$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
	
			// Next, check the image width and height so we know whether it is portrait or landscape oriented
			$w     = $image[1];
			$h     = $image[2];
			$class = ( $w < $h ) ? 'portrait' : 'landscape';
	
			// Last, add the image with the class
			the_post_thumbnail('medium', array('class' => $class );
		} ?>
	</div>

	<?php // Example of .img-contain usage ?>
	<div class="img-contain">
		<?php if ( has_post_thumbnail() ) {
			// First, get the image
			$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
	
			// Next, check the image width and height so we know whether it is portrait or landscape oriented
			$w     = $image[1];
			$h     = $image[2];
			$class = ( $w < $h ) ? 'portrait' : ''; // By default, we expect landscape orientation
	
			// Last, add the image with the class
			the_post_thumbnail('medium', array('class' => $class );
		} ?>
	</div>

	<?php // Example of .img-circle usage ?>
	<div class="img-circle">
		<?php if ( has_post_thumbnail() ) {
			// First, get the image
			$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
	
			// Next, check the image width and height so we know whether it is portrait or landscape oriented
			$w     = $image[1];
			$h     = $image[2];
			$class = ( $w < $h ) ? 'portrait' : 'landscape';
	
			// Last, add the image with the class
			the_post_thumbnail('medium', array('class' => $class );
		} ?>
	</div>
<?php endwhile; ?>