imagebox in html auto orients the image

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?

Kaiido · Accepted Answer · 2017-04-27T08:00:48.610

3

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">

edited Apr 27 '17 at 08:00

answered Apr 27 '17 at 07:25

Kaiido

123,334
13
219
285

nice choice of picture – Mahesh Suthar Apr 27 '17 at 07:35
@MaheshSuthar It's picked randomely. – Kaiido Apr 27 '17 at 07:35
Thank you so much! This is what I've been looking for! God bless! – Dranreb Apr 27 '17 at 07:38
1

keep in mind does not supported in [ie / edge](http://caniuse.com/#search=object-fit) – Alex Char Apr 27 '17 at 07:50
@Kaiido It works! But somewhat when uploading portrait pictures taken from an iphone, it stands again...unlike other images where it auto adjusts.. is this in the matter of pictures taken from an iphone? here's the sample http://imgur.com/QIcmp3F – Dranreb Apr 27 '17 at 07:50
@Dranreb Yes, all browsers don't respect yet the image-orientation EXIF data. FF does and even exposes an [`image-orientation`](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) CSS property, others don't yet... The only way then is to parse this EXIF metadata via js, and apply correct rotation from it, not an easy task for a comment. – Kaiido Apr 27 '17 at 07:58
@Kaiido Yeah I just researched that .. is there any thread/guides in doing the EXIF - js solution that you mentioned? Really need to fix this .. :/ – Dranreb Apr 27 '17 at 08:21
There may be some Q/A in here about it already, if not, feel free to post as a new question. But basically it would go as : parse the EXIF data (many js libs do this more or less properly, (EXIF can be complex)), then rotate through CSS. It's not **that** hard, but extracting the correct info can be tricky. Oh just found that someone did an `extract-only-orientation` answer : http://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side might worth a try. – Kaiido Apr 27 '17 at 08:25
@Kaiido Thanks again! Those information were really helpful! You might wanna check my new question: http://stackoverflow.com/questions/43653008/parse-exif-using-js-to-autorotate-images – Dranreb Apr 27 '17 at 08:52

score 0 · Answer 2 · answered Apr 27 '17 at 07:20

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>

Mahesh Suthar · Answer 3 · 2017-04-27T07:34:06.357

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

imagebox in html auto orients the image

3 Answers3