Skip to content

Instantly share code, notes, and snippets.

@tikitikipoo
Created February 8, 2012 13:02
Show Gist options
  • Save tikitikipoo/1769194 to your computer and use it in GitHub Desktop.
Save tikitikipoo/1769194 to your computer and use it in GitHub Desktop.
画像の真ん中らへんを切り抜いて表示(naturalHeightとnaturalWidthが動作するブラウザのみ)
// javascript
var url = "http://jsdo.it/img/common/side/bnr_html5_01.png";
var image = document.getElementsByTagName('img')[0];
image.src = url;
image.onload = function() {
// for safari, firefox
// その他のブラウザは別途対応お願いします
var height = this.naturalHeight;
var width = this.naturalWidth;
if (height > width) {
height *= 200 / width;
this.width = 200;
this.style.top = - (height - 200) / 2 + 'px';
this.style.left = 0;
this.style.position = 'absolute';
} else {
width *= 200 / height;
this.height = 200;
this.style.top = 0;
this.style.left = - (width - 200) / 2 + 'px';
this.style.position = 'absolute';
}
};
// html
<div class="photo">
<img src="" />
</div>
//css
body { background-color: #DDDDDD; font: 30px sans-serif; }
div.photo {
float: left;
margin: 5px;
width: 130px;
height: 130px;
position: relative;
overflow: hidden;
}
div.photo img {
display:block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment