###質問
category.phpにて、投稿された縦横様々な大きさの画像をjQueryでセンタリング/トリミングをして並べているのですが、safariで読み込み時に画像が横一列ではなくガタガタだったり、hoverすると崩れたりしてしまい困っています。検証したsafari,firefox,chrome,Wrodpressは全て最新バージョンです。どういったものが原因として考えられるでしょうか?
PHP
1<?php get_header(); ?> 2<article> 3 <section <?php post_class(); ?>> 4 <div class="archive"> 5 <h3 class="category-name"><?php single_cat_title( '', true ); ?> :</h3> 6 <div class="square"> 7 <?php if ( have_posts() ) : ?> 8 <?php while ( have_posts() ) : the_post(); ?> 9 10 <div class="trim"><a href="<?php the_permalink(); ?>"><?php the_content(); ?></a></div> 11 12 <?php endwhile; ?> 13 <?php endif; ?> 14 </div> 15 </div> 16 </section> 17</article> 18<?php get_footer();
CSS
1.trim{ 2 margin: 0.5rem; 3 display: inline-block; 4 overflow: hidden; 5 width: 50px; 6 height: 50px; 7} 8 9.trim img{ 10 position: relative; 11} 12 13.trim img:hover{ 14 -webkit-transform: scale(0.95); 15 -moz-transform: scale(0.95); 16 -o-transform: scale(0.95); 17 -ms-transform: scale(0.95); 18 transform: scale(0.95); 19}
JavaScript
1jQuery.event.add(window, "load",function(){ 2 var sl = '.trim img'; 3 var fw = 50; 4 var fh = 50; 5 var iw, ih; 6 j(sl).each(function(){ 7 var w = j(this).width(); 8 var h = j(this).height(); 9 10 //横長の画像の場合 11 if (w >= h) { 12 iw = (fh/h*w-fw)/2; 13 j(this).height(fh); 14 j(this).css("top",0); 15 j(this).css("left","-"+iw+"px"); 16 } 17 //縦長の画像の場合 18 else { 19 ih = (fw/w*h-fh)/2; 20 j(this).width(fw); 21 j(this).css("top","-"+ih+"px"); 22 j(this).css("left",0); 23 } 24 }); 25});
###追記
fransformを切るとガタつかなくなるのでjQueryではなくCSSのtransformが原因だと思うのですが、どうしたら良いのでしょうか...?
こういった状態になります(画像はぼかし処理をしています)。ズレ方は様々ですが、一番縦長の画像が最上部に配置され、横長の画像が最下部に配置されることが多いと思います。
- CSSでの実装