Automatic crop filling in HTML & CSS -

i working on tumblr blog, in photos cropped square. effect works when photos portrait not landscape. instead, photos shown landscape. @ http://hugowolfdesigns.tumblr.com/ see mean (the first , second photos show not desire; third photo shows effect i'm trying achieve).

what code can use make photos crop way square shape?

this use crop currently:

<div id = "photo"> <a href="{permalink}"><img class = "default" img src="{photourl-500}" width="250"/></a> </div> 

however if use height="250" stretches photo, rather cropping it.

you need assign width or height image depending on whether landscape or portrait image. in instance control width/height in css, not inline. use jquery assign correct class correct image type.

example http://jsfiddle.net/xukcc3sv/

css

img.portrait, img.square {     width: 100px; } img.landscape {     height: 100px; } 

jquery

// i've added callback within addclass function prevent multiple use.  $('img').addclass(function () {     if (this.height === this.width) {         return 'square';     } else if (this.height > this.width) {         return 'portrait';     } else {         return 'landscape';     } }); 

this quick example using portrait image , landscape image.

css solution

example http://jsfiddle.net/xukcc3sv/1/

div {     width: 100px;     height: 100px;     display: block;     background-image: url('image.jpg');     background-repeat:no-repeat;     background-size:cover; } 

if use image background , assign background property 'cover' auto scale ensuring complete coverage.