---
title: Image pleine largeur
subtitle: Casser le conteneur.
lang: fr
slug: "image-full"
createdAt: "2020-09-15T09:00:00.000Z"
updatedAt: "2022-06-08T14:24:06.000Z"
excerpt: Faire déborder une image de son conteneur sans tout casser.
tags: ["CSS"]
type: fragments
---

import AstroImage from "../../../components/AstroImage.astro";
export const example =
	"https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg";
export const context =
	"https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg";
export const container =
	"https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg";
export const banner =
	"https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg";
export const broken =
	"https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg";
export const result = "https://assets.nardu.in/image_bleed_6c164e82b3.jpeg";

## 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.

<AstroImage src={example} width="320" height="568" alt="" />

### Contexte

Considérons le html suivant&nbsp;:

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

Et le style suivant&nbsp;:

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

<AstroImage src={context} width="320" height="568" alt="" />

### Déborder du conteneur

Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbsp;:

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

<AstroImage src={container} width="320" height="568" alt="" />

### 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&nbsp;:

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

<AstroImage src={banner} width="320" height="568" alt="" />

Il faut ensuite forcer l'image à prendre toute la largeur du conteneur&nbsp;:

```css
.hero__image {
	width: 100%;
}
```

<AstroImage src={broken} width="320" height="568" alt="" />

Pas top…

### J'ai cassé l'image…

**ENFIN** le code magique pour redonner son ratio à l'image sans la déformer&nbsp;:

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

<AstroImage src={result} width="320" height="568" alt="" />

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

## TL;DR

Le code complet&nbsp;:

```css
.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;
}
```