From the course: CSS: Images
Join today to access over 22,600 courses taught by industry experts.
Fitting an image inside a grid cell
From the course: CSS: Images
Fitting an image inside a grid cell
- [Illustrator] Let's see how these image sizing techniques work with modern layout tools. In this example, I have four images of different size and different proportion and I want to display them in a two by two grid. Right now they're sitting inside a container called article over the class content and it's just four images listed one after the other. To create a two by two grid, I can use display grid on the containers. I'll turn it into a grid container. Then I need To provide some parameters for the grid. So I'll say grid templates, columns, and I'll make two columns, repeat two and then 20 REM as the width of the columns then I want to add a little gap between the columns. So I'll say gap, one REM. Now we can inspect the grid here by turning on the layout tools and checking overlay grid. And you can see there's a grid here with a gap and everything works for the layout but images are not fitting properly. That's…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
-
Modern image markup5m 55s
-
Getting rid of the space underneath an image4m 3s
-
Fitting an image inside any container5m 45s
-
Create a square (or other proportion) image5m 48s
-
Position an image inside a container3m 4s
-
Use CSS to crop an image3m 18s
-
Fitting an image inside a grid cell3m 8s
-
Fitting an image inside flexbox4m 38s
-
Fitting background images to any container2m 33s
-
Position background image within a container4m 55s
-
-
-
-
-