136 lines
3.0 KiB
Plaintext
136 lines
3.0 KiB
Plaintext
---
|
|
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"]
|
|
---
|
|
|
|
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 :
|
|
|
|
```html
|
|
<section class="container">
|
|
<div class="hero">
|
|
<img class="hero__image" src="hero.img" />
|
|
</div>
|
|
</section>
|
|
```
|
|
|
|
Et le style suivant :
|
|
|
|
```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 :
|
|
|
|
```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 :
|
|
|
|
```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 :
|
|
|
|
```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 :
|
|
|
|
```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 :
|
|
|
|
```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;
|
|
}
|
|
```
|