Dead Center Image

dead-center.css

// Dead Center Fill
.block {
	position: relative;
	height: 190px;
	overflow: hidden;
	.img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: none; // Switch to orientation
		max-height: 100%; // Switch to orientation
	}	
}

// Experimental Dead Center Fill
.block {
	display: flex;
	.img {
		object-fit: cover;
		object-position: center;
		font-family: 'object-fit: cover; object-position: bottom;'; // IE 11 Polyfill 
		/* (https://github.com/bfred-it/object-fit-images) */
	}	
}

// Dead Center Icon/Pic
.block {
	position: relative;
	height: 190px;
	overflow: hidden;
	.img {
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		margin: auto;
		width: 100px;
		height: 100px;
	}	
}

// Ideal Image Fill Flex
.block {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	.image {
		max-width: none;
		max-height: none;
		min-width: 100%;
		min-height: 100%;
	}
}


// Ideal Image Fill 2
.block {
	position: relative;
	overflow: hidden;
	.image {
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		margin: auto;
		width: 100%;
		min-height: 100%;
	}
}

// Ideal Image Fill
.block {
	position: relative;
	.image {
		position: absolute;
		max-width: 150%;
		min-width: 100%;
		min-height: 100%;
		top: 50%;
		left: 50%;
		@include translate (-50%, -50%);
		}
}