Resizing image base on the longest side

Question

I'm trying to find a method to re-size image (.jpg) file base on the longest side. Images taken vertically and horizontally will have different longest side, I'm trying to fit them into a size-fixed div (inline-block). If I control only width or length, they will not be in scale (squashed).

I have read "CSS Equivalent of the “if” statement", it seems that there is a similar/possible method I can go about... finding which is the longest side (width OR height) and then adding 2 css for that.

Perhaps something along the lines below? (Page is HTML based)

CSS

img.thumb { identify longest side} //not quite sure how to go about this

img.thumb width {
  width:200px;
  height:auto;
  border:0px;
}

img.thumb height{
  width:auto;
  height:200px;
  border:0px;
}

I would prefer not to, but do I need to use JQuery instead (e.g. find image width and length, if width > length then add "width" to class)

What are your rules for determining how to resize? Like if the image has larger width, what is the expected behavior and vice-versa? And what should happen if the width and height are the same? — Mikey, Jun 02 '16 at 03:47
@Mikey Thank you for commenting. To begin with, the width and height will not be the same (this is definite). I'm trying to create 2 rules for re-size. A) when width is longer than height, re-size width to 200px and height as auto. Vice-versa B) for height. Since I'm not sure how to go about "determine which width or height is longer", I re-size it to fixed width:200px; height:150px at the moment. — Maki, Jun 02 '16 at 04:46
What you are looking for is `object-fit` - not supported in all browsers yet, but there's workarounds. If you're o.k. with making them background images instead, `background-size` can be used to the same effect (and browser support is much higher.) — CBroe, Jun 02 '16 at 04:47
@CBroe, thank you for your comment and suggestion. I'm not familiar with background images and background-fit. Can you kindly give an example? — Maki, Jun 02 '16 at 05:47

score 1 · Accepted Answer · answered Jun 02 '16 at 05:22

1

I believe this can be achieved purely by CSS.

.thumb {
  display: inline-flex;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  border: 1px solid gray;
}
.thumb img {
  max-width: 200px;
  max-height: 200px;
  margin: auto;
}

<div class="thumb">
  <img src="https://dl.dropboxusercontent.com/u/30527718/tall.jpg"/>
</div>
<div class="thumb">
  <img src="https://dl.dropboxusercontent.com/u/30527718/wide.jpg"/>
</div>

Or Codepen demo

answered Jun 02 '16 at 05:22

Lounge9

1,213
11
22

1

Good idea! With `display:inline-flex` don't work in Firefox and IE but with table-cell or float works fine in all browser. – Jun 02 '16 at 06:30
@Lounge, thank you very much. It works!! But I have a problem, it won't align to the center like yours. What maybe the problem? https://jsfiddle.net/2tc5Lh3m/ – Maki Jun 02 '16 at 07:52
if you use `flex` or `inline-flex` center the elements with `justify-content:center;` – Jun 02 '16 at 11:23
1

@Maki, my pleasure! Glad to help. In your fiddle you were missing `margin: auto` on your `` tags. [Updated fiddle](https://jsfiddle.net/2tc5Lh3m/3/) – Lounge9 Jun 02 '16 at 18:03
@Lounge9, awesome. Thanks for the follow up on the extra question. After trial-and-error, I found out that I need to put the 'margin: auto' at ' a href' which I didn't wrote in the demo. '
' By the way, how come margin is effecting it?
– Maki Jun 03 '16 at 02:02
1

@Maki correct, whatever the direct parent is of the needs to have all the `display: inline-flex, width, height, etc`. Essentially [this is how I'd do it](https://jsfiddle.net/2tc5Lh3m/4/). Also, this is a great explanation of [margin:auto works](http://stackoverflow.com/a/3170774/390866) – Lounge9 Jun 03 '16 at 23:45

score 0 · Answer 2 · answered Jun 02 '16 at 04:56

0

Use javascript to do this.

http://www.w3schools.com/js/js_htmldom_methods.asp

var thumbImage = document.getElementById("your-image-id").style ;
//Your calculation in some variable x , y
var thumbImage.width = x ;
var thumbImage.height = y ;

answered Jun 02 '16 at 04:56

Akira Lynn

394
3
14

Resizing image base on the longest side

2 Answers2