127.0.0.1: ページの作成:「*trimsquare.js $(function() { jQuery.event.add(window, "load", function(){ var body_w = $(window).width(); // window width var fw = body_w / 3;...」

2015-05-19T18:12:17Z

ページの作成:「*trimsquare.js $(function() { jQuery.event.add(window, "load", function(){ var body_w = $(window).width(); // window width var fw = body_w / 3;...」

新規ページ

*trimsquare.js
$(function() {
jQuery.event.add(window, "load", function(){
var body_w = $(window).width(); // window width
var fw = body_w / 3; //fixed width
var fh = body_w / 3; //fixed height
$(".trim_square").css("width",fw+"px");
$(".trim_square").css("height",fw+"px");
var sl = '.trim_square img'; //selector
$(sl).each(function(){
var w = $(this).width();
var h = $(this).height();
if (w >= h) {
$(this).height(fh);
var iw = ($(this).width() -fw) / 2;
$(this).css("left", "-"+iw+"px");
$(this).css("top", "0px");
} else {
$(this).width(fw);
var ih = ($(this).height() - fh) / 2;
//$(this).css("top", "-"+ih+"px"); // middle合わせ
$(this).css("top", "0px"); // top合わせ
$(this).css("left", "0px");
}
// 表示
$(this).css("display", "inline");
});
});
});
/*
これだと端末幅が取得できない場合があるのでレイアウトが崩れる
$(function() {
$(".trim_square img").on('load', function() {
var body_w = $(window).width(); // window width
var fw = body_w / 4; //fixed width
var fh = body_w / 4; //fixed height
$(this).parent().parent().css("width",fw+"px");
$(this).parent().parent().css("height",fw+"px");
var w = $(this).width();
var h = $(this).height();
if (w >= h) {
$(this).height(fh);
var iw = ($(this).width() -fw) / 2;
$(this).css("left", "-"+iw+"px");
$(this).css("top", "0px");
} else {
$(this).width(fw);
var ih = ($(this).height() - fh) / 2;
//$(this).css("top", "-"+ih+"px"); // middle合わせ
$(this).css("top", "0px"); // top合わせ
$(this).css("left", "0px");
}
// 表示
$(this).css("display", "inline");
});
})
*/

*trimsquare.css
.trim_square img {
display:none; /*サイズ変更前は非表示*/
position:absolute;
}
.trim_square {
position:relative;
overflow:hidden;
}

*sample.html
<<nowiki />div class="trim_square">
<<nowiki />img src="test.png" />
</div>
<<nowiki />div class="trim_square">
<<nowiki />img src="test.png" />
</div>

Javascript/自作jqueryライブラリ/画像正方形トリム - 変更履歴

127.0.0.1: ページの作成:「*trimsquare.js $(function() { jQuery.event.add(window, "load", function(){ var body_w = $(window).width(); // window width var fw = body_w / 3;...」