Image pleine largeur

Casser le conteneur.

Image inline

On est parfois obligé d’utiliser des images dans des balises img plutôt que dans un background en css. Comment faire alors pour que l’image sorte de son conteneur pour en faire une bannière ? Exemple pratique à partir de ce même site.

Contexte

Considérons le html suivant :

<section class="container">
	<div class="hero">
		<img class="hero__image" src="hero.img" />
	</div>
</section>

Et le style suivant :

.container {
	padding: 0 14px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1040px;
}
img {
	max-width: 100%;
	height: auto;
}

Déborder du conteneur

Afin de faire prendre à l’image toute la largeur, on agit sur son conteneur :

.hero {
	margin-left: calc(50% - 50vw);
	position: relative;
	width: 100vw;
}

Faire une bannière

On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutôt que l’image entière et faire correspondre la hauteur de l’image à la hauteur du conteneur :

.hero {
	height: 200px;
}
.hero__image {
	height: 100%;
}

Il faut ensuite forcer l’image à prendre toute la largeur du conteneur :

.hero__image {
	width: 100%;
}

Pas top…

J’ai cassé l’image…

ENFIN le code magique pour redonner son ratio à l’image sans la déformer :

.hero__image {
	object-fit: cover;
	object-position: center; /* à positionner comme on veut */
}

Cette technique s’apparente à l’utilisation d’une image de background mais en dur 😁

TL;DR

Le code complet :

.hero {
	margin-left: calc(50% - 50vw);
	position: relative;
	width: 100vw;
	height: 200px;
}
.hero__image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}