What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

How to use object-fit: contain;

Ahr Aitch

New member
I have an area of one of my screen designs reserved for a photo. In CSS I defined the width and height as 245px each then used the object-fit: contain; selector. I made no changes in my HTML. My understanding is that object-fit: contain should cause any image coded in HTML with that DIV class to be fitted to the space defined for that DIV class, but this is not working for me. The images display as their actual size without regard to the size of the container defined by CSS. Do I misunderstand how this is supposed to work?

If anyone can tell me what I'm doing wrong, I'd very much appreciate it. I've searched, watched YTs and even ran both my CSS and HTML code through validators without finding any problem. My images are stored in an 'images' sub-folder within my project folder and are referenced (properly, I think) with "images/filename" in the HTML.

<div class="item2">
<img src="images/filename">
There is no declaration of width and height in HTML for the image to be displayed. The actual images vary from 480x480px to 600/500px.

grid-area: photo
width: 245px;
height: 245px;
margin-top: 5px;
margin-left: 70px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
padding: 6px;
object-fit: contain;