From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Create a square (or other proportion) image
From the course: CSS: Images
Create a square (or other proportion) image
- [Instructor] Now that you know how to fit any image to any container, we can start looking at the shape and proportions of the containers themselves. A common request is to create responsive proportional containers, so a container that is always squared no matter what width is displayed at or is always 16 by nine or always some other proportion. This is surprisingly challenging in CSS, because though you can define the width and height of any container, you can't set the width or height to your percentage or proportion of the other value. So you can say something like make the height 50% of the width of this container. That means you can't easily make proportional containers without employing a hack. So I want to show you the hack because it's so useful and that way you'll know how to create square images, how to create images with any proportion you want to and how to do it using pure CSS. I say it's a hack because…
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.
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
-
-
-
-
-