画像をサムネイル化してくれるjQuery「MyThumbnail.js」をスマホサイトで利用したい

Question

MyThumbnailをスマホサイトで利用したいです。
1200x600程度の画像を正方形に抜きその画像の説明を写真下に掲載した物をslickで画面に2枚表示させてカルーセルさせようとしました。

  <div class="new_c"> 
  <div class="new_c_div"><a href="#"><img src="images/p/01.jpg" ><br />ここに写真の名前1</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/02.jpg" ><br />ここに写真の名前2</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/03.jpg" ><br />ここに写真の名前3</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/04.jpg" ><br />ここに写真の名前4</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/05.jpg" ><br />ここに写真の名前5</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/06.jpg" ><br />ここに写真の名前6</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/07.jpg" ><br />ここに写真の名前7</a> </div>
  <div class="new_c_div"><a href="#"><img src="images/p/08.jpg" ><br />ここに写真の名前8</a> </div>
  </div>
  <script>

$(document).ready(function(){
    $(".new_c_div img").MyThumbnail({
        thumbWidth:  150,
        thumbHeight: 150,
//      imageDivClass: :"new_c",    // 生成されるdivのclass
//      bShowPointerCursor: false,  // trueの場合、カーソル形状cursor:pointerへ設定
    });
});

  
$(function(){
$('.new_c').slick({
autoplay:true,
autoplaySpeed:5000,
slidesToShow:2,
pauseOnHover:true,
responsive:true
});
}); 
</script>

当然かもしれませんが、端末ごとで余白等がまちまちになってしまい、予想通りの表示にはなってくれませんでした。
(chromeデベロッパツールで確認。galaxyS5で綺麗に見えると、iPhone5で右余白が無くなったり…)
MyThumbnailの「thumbWidth」をパーセントで出来ればとも考えたのですが、そうすると縦サイズが取得できなくなりますよね…

どうにかして、横方向をパーセントで表示・縦はそれに合わせて正方形で切り抜きと出来ないでしょうか?
MyThumbnailにこだわりはないので、他のプラグインで出来るようだったら乗り換えします。
また、slickのカルーセル表示にもこだわりはありません。厳しいようだったら<li>を使ったりして２枚×○枚の表示でもかまいません。

良い方法があれば教えてください。

Answer 1

わたしは、そういった場合cssで解決したことはあります。

■中央に合わせてトリミング

<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>
<div class="trim"><img src="画像URL" alt=""></div>

/* trimming */
.trim {
  width: 150px;  /* トリミングしたい幅 */
  height: 150px;  /* トリミングしたい高さ */
  overflow: hidden;
  position: relative;
}
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* layout */
div {
  float: left;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

参考：http://www.tam-tam.co.jp/tipsnote/html_css/post10099.html

jqueryにこだわりがなければ、こちらを試しては如何でしょうか。

Comments

[terataka]

返答ありがとうございます。

jQueryにこだわりはありません。
しかし、保存する画像のサイズ・縦横比がばらばらなのが問題になってしまう気がします…
(縦画像やデジカメ・スマホで撮影した物があり、縦横比が一定ではないです)
参考サイトのように、どうしても綺麗に表示できないのではないでしょうか?

.trim を .new_c_div に置き換えて、とりあえず設置してみました。
横幅はいい感じにリサイズしているのですが、縦横比が元画像のままで真四角にトリミングしてくれませんでした。
参考サイトの/* layout */のdivの指定もこのままだと全部のdivにかかってしまいますよね…
「new_c」や「new_c_div」で試してみたのですが、変化無しです。

どのようにしたら良いでしょうか?

[shiho_k]

なるほど拡大もしなければいけないということですね・・・

親要素に指定したサイズに上下左右を拡大縮小・トリミングしていいかんじに収めてくれるプラグインがありましたので、こちらで試してはどうでしょう？
このプラグインも有名ですね。
http://magpepen.hatenablog.com/entry/2013/12/12/181609

Answer 2

画面幅取得して2で割って念のため小数点を切り捨て、とか。

var img_width = Math.floor( window.innerWidth / 2 );

Comments

[terataka]

返答ありがとうございます!

これはどこに記入したら良いのでしょうか?(素人ですみません…)
また、幅はこれで取得できるとして高さはどのようにしたらいいのでしょうか?
(ここで計算した物を高さにもセット?その場合どのように記述したら良いのでしょう…)

[kei344]

> これはどこに記入したら
使う場所の直前でよいでしょう。

> 高さはどのように
「横に二個正方形の画像を並べたい」のでは？ それであれば thumbWidth と thumbHeight は同じ値でしょう。

[terataka]

すみません。
素人すぎて全然理解できないです。

>使う場所の直前でよいでしょう。
------
<script>
var img_width = Math.floor( window.innerWidth / 2 );
$(document).ready(function(){
$(".new_c_div img").MyThumbnail({
～
----
と言う事で良いのでしょうか?

>「横に二個正方形の画像を並べたい」のでは？ それであれば thumbWidth と thumbHeight は同じ値でしょう。
これはどのように記載したらいいのでしょうか?