【環境情報】
・baserCMSのバージョン:4.4.7
・レンタルサーバー名:ロリポップ
・使用テーマ:ratio_3_2 バージョン:1.4.1
・PHPスキル(自己評価):D
下記ソースにて、セルで囲んだ中に写真3点配置しています。
PC・winタブレットでは縦横縮小されて表示でき、ポップアップも原寸大900×1200で表示できます。
しかしながら、iPhoneで見ると配置した3点の写真の縦方向が縮小されず間延びして表示されてしまいます。
ポップアップは問題無く表示できます。
iPhoneでも正常に表示できるように修正方法をご教授頂けないでしょうか。
<table border="1" cellpadding="3" cellspacing="1" style="width:95%;">
<tbody>
<tr>
<td style="text-align: center;"><br />
<a href="/files/uploads/07Gh_y02_s_1__large.jpg" rel="colorbox" title="リフォーム外装(G邸離れ):塗装・瓦・防水・樋工事_施工前"><img align="" alt="リフォーム外装(G邸離れ):塗装・瓦・防水・樋工事_施工前" class="ow" src="/files/uploads/07Gh_y02_s_1__large.jpg" style="height: 50%; width: 50%;" /></a> <br />
<img align="" alt="sekou_br.png" src="/files/uploads/sekou_br.png" style="height: 60%; width: 60%;" /><br />
<a href="/files/uploads/07Gh_y04_s_1__large.jpg" rel="colorbox" title="リフォーム外装(G邸離れ):塗装・瓦・防水・樋工事_施工後"><img align="" alt="リフォーム外装(G邸離れ):塗装・瓦・防水・樋工事_施工後" class="ow" src="/files/uploads/07Gh_y04_s_1__large.jpg" style="height: 50%; width: 50%;" /></a> <br />
</td>
</tr>
</tbody>
</table>
GUSSAN
2
@T.Sumii
というのは、iOSのSafariという意味ですよね?
iOSに限らず、Safariの場合、imgのheight属性を拾っていて(たぶんバグかと)、他のブラウザは無視しているということかと。
拝見したコードの場合、特にレイアウトシフトを回避するためという意図でheight属性を書かれているのでもなさそうなので、インラインのheight属性の記述自体をやめたらどうでしょうか?
ご教授ありがとうございます。
表の幅のみ90%とし、表示用画像を再度作成し幅・高さ共に原寸で張り込むと変形表示は解消されました。
しかし、ブラウザ画面いっぱいいっぱに表示される事や、スマホで見た時表の線と写真がくっついてしまうのが嫌(余白が欲しい)で色々試しては見ましたが、iPhoneのchromeでもSafariでも解消できませんでした。
表の外に配置した写真は、%縮尺でゆとりを持って表示でき変形もしないのですが・・・。
表の中に入れること自体NGなのかもしれませんね。
他の方法も考えてみます。
<table align="center" border="1" style="width:90%;">
<tbody>
<tr>
<td style="text-align: center;"><br />
<a href="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工前_s__large.jpg" rel="colorbox" title="リフォーム(I邸):外壁改修工事_施工前"><img align="" alt="リフォーム(I邸):外壁改修工事_施工前" class="ow" src="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工前_s400.jpg" style="border-width: 9px; border-style: solid;" /></a><br />
<img align="" alt="sekou_br2.png" src="/files/uploads/sekou_br2.png" /><br />
<a href="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工後_s__large.jpg" rel="colorbox" title="リフォーム(I邸):外壁改修工事_施工後"><img align="" alt="リフォーム(I邸):外壁改修工事_施工後" class="ow" src="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工後_s400.jpg" style="border-width: 9px; border-style: solid;" /></a><br />
</td>
</tr>
</tbody>
</table>
<p> </p>
<p><span style="font-size:14px;"> 木材の一部・サイディング・庇の板金を新規に取り替えて雨漏りがしなくなりました。<br />
雨漏りがあった時は、早めの対処をすれば金額・日数共に少なくすみます。</span></p>
<p style="text-align: center"><a href="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工途中_s__large.jpg" rel="colorbox" title="リフォーム(I邸):外壁改修工事_施工途中"><img align="" alt="リフォーム(I邸):外壁改修工事_施工途中" class="ow" src="/files/uploads/20.リフォーム(I邸):外壁改修工事_施工途中_s__large.jpg" style="height: 80%; width: 80%;" /></a><br />
<span style="font-size:14px;">【 外壁改修施工中 】</span></p>
GUSSAN
4
シンプルにこの部分を削除してみたらどうでしょう?というご提案です。
確かに、その方が簡単でスマホ表示も解消されますね。
再三のご教授、有難うございます。
ただ、そうするとポップアップ時大きく表示させる為元画像をを大きく(1200px)しているので、PCでも表いっぱいいっぱいに写真が表示され余白が無くなってしまうようで、スマホはとりあえずあきらめ上記方法をとってみました。
スマホでも何とか、余白を持たせられないか試行錯誤してみます。
ごめんなさい。
heightの部分のみ削除で解決できました。
足らぬ知識で色々考えこんでいるうちに、迷宮入りしてました。
大変失礼しました。
これに懲りず、ご教授頂けます様よろしくお願いします。
GUSSAN
7
というのは、colorboxですよね?
colorboxの表示サイズは、別に指定できますが、このテーマの場合の指定場所を確認しますので少しお待ちください。
みたところ、このテーマには、colorboxはデフォルトで実装されていないようなので、そちらで追加されたものではないのでしょうか?
色々こねくり回してしまいすみません。
colorboxは ratio_3_2サポートサイトよりデータダウンロードし自身で実装したもので、問題無く作動しています。
1200pxの件は、height: ; width: ; を同時に削除したり記入方法や数値変えたりと、両方記入していないといけないものと思い込んでいた為のものですのでお気になされないようお願い致します。
chromeでもSafariでも変形することなく閲覧できるようになりました。
拙い質問にお答えいただき、本当に有難うございました。