jquery - Resizing image base on the longest side -
this question has answer here:
- how auto-resize image fit div container 26 answers
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