From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Position an image inside a container
From the course: CSS: Images
Position an image inside a container
- [Instructor] When you set object fit to cover on an image, the image is automatically centered in the container. That may be what you want, but it is not always what you want. In certain circumstances, for example, with this image here, what is in the center of the image isn't what you want to display. You want to display some other portion of the image. Here, the monkey is a little bit off to the left-hand side, which means if I crop this image down to the center by making the image square, the monkey is not centered in the image, and I need to fix this somehow. I basically need to move the image in relation to the container, while retaining this crop value and object fit cover. For this purpose, we have the object position property. Object position allows us to align an element inside its container using two values, that would be the horizontal axis, and the vertical axis or simple keywords like left, top, bottom, right…
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
-
-
-
-
-