jquery - Resizing image base on the longest side -


this question has answer here:

i'm trying find method re-size image (.jpg) file base on longest side. images taken vertically , horizontally have different longest side, i'm trying fit them size-fixed div (inline-block). if control width or length, not in scale (squashed).

i have read "css equivalent of “if” statement", seems there similar/possible method can go about... finding longest side (width or height) , adding 2 css that.

perhaps along lines below? (page html based)

css

img.thumb { identify longest side} //not quite sure how go  img.thumb width {   width:200px;   height:auto;   border:0px; }  img.thumb height{   width:auto;   height:200px;   border:0px; } 

i prefer not to, need use jquery instead (e.g. find image width , length, if width > length add "width" class)

i believe can achieved purely 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


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo