質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2226閲覧

【Wordpress】safariで画像一覧メニューがガタガタになる

sssooo

総合スコア17

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/03/07 23:45

編集2022/01/12 10:55

###質問
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での実装

max-height/widthを入れて上記のコードで試したところこうなりました。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masayoshi0222

2017/03/08 06:45

がたがたになっている画像のスクリーンショットがあるとより回答しやすいです。
sssooo

2017/03/08 09:28

編集しました。よろしくお願いします(_ _)
guest

回答2

0

こちらのコードで試してみて希望する動きになるでしょうか?

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>sample</title> 6<style> 7.trim{ 8 margin: 0.5rem; 9 display: inline-block; 10 overflow: hidden; 11 width: 50px; 12 height: 50px; 13} 14 15.trim img{ 16 position: relative; 17 top: 50%; 18 left: 50%; 19 width: auto; 20 height: auto; 21 -webkit-transform: translate(-50%,-50%); 22 -ms-transform: translate(-50%,-50%); 23 transform: translate(-50%,-50%); 24} 25 26.trim:hover{ 27 -webkit-transform: scale(0.95); 28 -moz-transform: scale(0.95); 29 -o-transform: scale(0.95); 30 -ms-transform: scale(0.95); 31 transform: scale(0.95); 32} 33</style> 34</head> 35 36<body> 37<article> 38 <section> 39 <div class="archive"> 40 <h3 class="category-name">TITLE :</h3> 41 <div class="square"> 42 <div class="trim"><a href="#>"><img src="img/101.png" alt=""></a></div> 43 <div class="trim"><a href="#>"><img src="img/102.png" alt=""></a></div> 44 <div class="trim"><a href="#>"><img src="img/103.png" alt=""></a></div> 45 <div class="trim"><a href="#>"><img src="img/104.png" alt=""></a></div> 46 <div class="trim"><a href="#>"><img src="img/105.png" alt=""></a></div> 47 <div class="trim"><a href="#>"><img src="img/106.png" alt=""></a></div> 48 <div class="trim"><a href="#>"><img src="img/107.png" alt=""></a></div> 49 <div class="trim"><a href="#>"><img src="img/108.png" alt=""></a></div> 50 <div class="trim"><a href="#>"><img src="img/109.png" alt=""></a></div> 51 </div> 52 </div> 53 </section> 54</article> 55 56</body> 57</html>

投稿2017/03/08 10:09

masayoshi0222

総合スコア162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sssooo

2017/03/08 10:17

下記のことが問題だったのですね...CSSも検討したのですが、画像のリサイズができないので希望の動きにならず断念しました。scaleを別のイベントなどにして対応するしかないでしょうか jQueryはこちらを参照しました http://qiita.com/ayaMarmot/items/befc42cf516a95fdfbb8
kei344

2017/03/08 10:37

To: sssoooさん > 画像のリサイズができない 上記コードに .trim img {max-height:100%;max-width:100%;} 追加で縦でも横でもいけると思います。
sssooo

2017/03/08 10:50

追加してみましたが、画像の中心を最上部として以下を表示するようになってしまうようです。画像を追記しました。
masayoshi0222

2017/03/08 10:51 編集

これで希望する動作になるかと思います。 .trimのvertical-alignの設定の問題のようでした。 <style> .trim{ margin: 0.5rem; display: inline-block; vertical-align:bottom; overflow: hidden; width: 50px; height: 50px; } .trim img{ position: relative; top: 50%; left: 50%; max-width: 100%; max-height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .trim:hover{ -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } </style>
kei344

2017/03/08 10:52

すみません、min-width/min-heightでいけませんか?
sssooo

2017/03/08 10:58

vertical-alignを設定しても上の画像の状態と変わらず、minにするとリサイズできない時の画像の状態になります。
masayoshi0222

2017/03/08 11:04

MacOSのSafariの環境で私の書いたソースを見て頂いてきちんと希望する動きになりますでしょうか? なるようであれば、WordPress側で書き出されたソースの中に別の原因がある可能性があるので、まずはお渡ししたサンプルソースが動くかご確認いただけますでしょうか?
kei344

2017/03/08 11:17

To: sssoooさん 何度もすみません、あまり良く見ずにコメントしていました。下記URLから見てみてください。 https://jsfiddle.net/9Lsmyb8m/
sssooo

2017/03/08 11:26

ご指摘の通りコピペしてローカル環境で画像のみ違うもので試してみましたが、max-height/widthにすると横幅が大きい画像が正方形にならず、min-height/widthにするとリサイズされません
guest

0

以下のようなソースを作成して私のローカル環境で確認してみたところ、問題なく表示されました。
(ロールオーバー時の縮小は縦横ばらばらだったのでそれはそれでまた別の問題があるように思います)
表示されているコード以外になにか原因となる要素はないでしょうか?

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>sample</title> 6<style> 7.trim{ 8 margin: 0.5rem; 9 display: inline-block; 10 overflow: hidden; 11 width: 50px; 12 height: 50px; 13} 14 15.trim img{ 16 position: relative; 17} 18 19.trim img:hover{ 20 -webkit-transform: scale(0.95); 21 -moz-transform: scale(0.95); 22 -o-transform: scale(0.95); 23 -ms-transform: scale(0.95); 24 transform: scale(0.95); 25} 26</style> 27<script type="text/javascript" src="assets/jquery/jquery-2.2.4.min.js"></script> 28<script> 29jQuery.event.add(window, "load",function(){ 30 var sl = '.trim img'; 31 var fw = 50; 32 var fh = 50; 33 var iw, ih; 34 $(sl).each(function(){ 35 var w = $(this).width(); 36 var h = $(this).height(); 37 38 //横長の画像の場合 39 if (w >= h) { 40 iw = (fh/h*w-fw)/2; 41 $(this).height(fh); 42 $(this).css("top",0); 43 $(this).css("left","-"+iw+"px"); 44 } 45 //縦長の画像の場合 46 else { 47 ih = (fw/w*h-fh)/2; 48 $(this).width(fw); 49 $(this).css("top","-"+ih+"px"); 50 $(this).css("left",0); 51 } 52 }); 53}); 54</script> 55</head> 56 57<body> 58<article> 59 <section> 60 <div class="archive"> 61 <h3 class="category-name">TITLE :</h3> 62 <div class="square"> 63 <div class="trim"><a href="#>"><img src="img/101.png" alt=""></a></div> 64 <div class="trim"><a href="#>"><img src="img/102.png" alt=""></a></div> 65 <div class="trim"><a href="#>"><img src="img/103.png" alt=""></a></div> 66 <div class="trim"><a href="#>"><img src="img/104.png" alt=""></a></div> 67 <div class="trim"><a href="#>"><img src="img/105.png" alt=""></a></div> 68 <div class="trim"><a href="#>"><img src="img/106.png" alt=""></a></div> 69 <div class="trim"><a href="#>"><img src="img/107.png" alt=""></a></div> 70 <div class="trim"><a href="#>"><img src="img/108.png" alt=""></a></div> 71 <div class="trim"><a href="#>"><img src="img/109.png" alt=""></a></div> 72 </div> 73 </div> 74 </section> 75</article> 76 77</body> 78</html>

投稿2017/03/08 09:46

masayoshi0222

総合スコア162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masayoshi0222

2017/03/08 09:48

自己レスですみません。 iPhoneのSafariでみて画像をタップするとがたがたになりますね。 もしかしてその状態のことを指してますでしょうか?
sssooo

2017/03/08 10:01 編集

いえ、パソコンです。iphoneのsafariではセンタリングはうまくいかない現状ですがこちらの環境ではガタガタにはなりませんでした。もし別の問題があるとすれば何が考えられるでしょうか?
masayoshi0222

2017/03/08 10:06

デバッグしてみたところJqueryでleftとtopの位置を変更していると思うのですが、それが縮小されたときに悪さをしてるようです。 画像のセンタリングとトリミングをJqueryではなくCSSのみでやるとうまくいきそうです。 https://deerest.co/2015/10/22/css3-img-center-trimming/
masayoshi0222

2017/03/08 10:12

もし可能なら、wordpressのテンプレートのHTMLではなく出力されたHTMLとCSSとJSを記載してもらえるとパソコン上でも再現が可能かもしれません。 また、私の書いたコードではsssoooさんの環境では正しく表示されますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問