imagebox in html auto orients the image - html

Question

I have this imagebox that will display a user's uploaded image:
<img src = "./imgs/..imagenamehere..." style = "background-size:cover; width:357px; height:357px;"
I placed the background-size:cover there because I want the imagebox to autoadjust the image when it's not in a 1x1 size so it won't stretch the image and also not to increase the imagebox's size.
However when displaying a long portrait image, the imagebox auto-orients the image making the image looks like it standing instead of the original portrait position.
Is there any way to fix this?

Answer 1

What you want is object-fit CSS property, unfortunately not yet supported in IE and Edge:
img {
width: 100px;
height: 100px;
border: 1px solid #dedede;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
<img src="http://lorempixel.com/100/300" class="contain">
<img src="http://lorempixel.com/100/300" class="cover">

Answer 2

background-size:cover;
is only for, as the name says, background-images. Example below
div {
height:200px;
width: 200px;
background-image: url("http://placehold.it/350x150");
background-repeat: no-repeat;
background-size:cover;
background-position: 50% 50%;
}
<div></div>

Answer 3

In this code you are adding and image but you are not applying the CSS on it. You are applying the CSS on background image.
use this code in your CSS instead
background-image : url (' < Path of image you want to show > ');
background-size : contain; <!-- You can use 'cover' also but see what you want it to look like -->
If you use background-size : cover; then if your image is not having suitable aspect ratio then it will be zoomed in to cover all the area where you are showing it, and if you use background-size : contain; then it will show your image in that area with it's maximum possible size by which both height and width of that image can fit inside.
If you have any doubt, then comment