Need help fitting an image into a div using `object-fit: cover`-CodePudding

I've tried all of the recommendations, and this seems so simple, but i can't get it. I have an image thats not square, and i'd like to fit it into a 200x200px parent div, without affecting the aspect ratio, and while ideally cropping to the center. Ive attached a failed attempt in a fiddle.

<div >
  <img src="https://storage.googleapis.com/frese-product-images/25.jpg">
</div>

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container > img {
    width: 200px;
    object-fit: cover;
    object-position: center center;
}

Ideally the plate is centered and shows http://jsfiddle.net/a6fzjp82/

CodePudding user response：

You mean something like this?

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container > img {
    width: 200px;
    height: 200px;
    object-fit: cover;
   
}

<div >
  <img src="https://storage.googleapis.com/frese-product-images/25.jpg">
</div>

CodePudding user response：

.container > img {
     width: 100%;
     height : 100%:
     object-fit: cover;

}