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

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…

Contents