#author("2022-11-01T17:14:55+09:00","","")
* refプラグインで横幅を省略するとスマホ版で縮小表示時にアスペクト比が維持されない [#g7769189]
- ページ: [[BugTrack]]
- 投稿者: [[ぬぺぺ]]
- 優先順位: 普通
- 状態: 提案
- カテゴリー: 本体バグ
- 投稿日: 2022-10-26 (水) 05:12:50
- バージョン: 1.5.4
** メッセージ [#d08148a1]
refプラグインで横幅か縦幅のいずれかを省略可能になりましたが、~
横幅を省略するとスマホ版で縮小表示時にアスペクト比が維持されません。
PC表示だとoverflowした部分が横スクロール表示になりますが、~
スマホ表示だとoverflowしないようになっているためか画像が縮小表示されます。~
その際、縦幅が固定値、横幅がautoなため横幅だけが縮まって画像が歪むようです。
以下、サンプル画像~
（画像は適当に大きそうな画像を [[BugTrack/2266]] からお借りしました。ボタンがレトロだ…）
・サイズ指定なし（高さ130px）
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png);|
・x65 を指定：スマホ表示で横幅が狭いと縮む
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|
・x65 を指定 ×5連：同上
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x65);|
・x260 を指定：同上
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x260);|
***対処法案 [#qb5f9314]
① 高さを height ではなく max-height で指定するといい感じになるようです。~
⇒ 拡大表示できなくなるのでダメでした。拡大を諦めればいい案…
② 省略された方の数値を計算で求め、HTMLのimgタグ中にwidth, heightを両方出力するといい感じになるようです。~
（確認：Firefoxのみ）~
⇒ URL表記をした際にダメなようです。
③ JavaScriptで画像受信後にonload属性でwidth, heightを指定（おまけ②）
***おまけ [#gedea8be]
せっかくなので、省略表記が実装される前に自前で改造していたコードを載せてみます。~
参考になるかわかりませんが…
function plugin_ref_body() 中：
// 拡張パラメータをチェック
if (! empty($params['_args'])) {
$_title = array();
foreach ($params['_args'] as $arg) {
if (preg_match('/^([0-9]+)x([0-9]+)$/', $arg, $matches)) {
$params['_size'] = TRUE;
$params['_w'] = $matches[1];
$params['_h'] = $matches[2];
// modified add start: 縦横どっちかの省略を可能に
} else if (preg_match('/^([0-9]+)x$/', $arg, $matches)) {
$params['_size'] = TRUE;
$params['_w'] = $matches[1];
$params['_h'] = $height * ($matches[1] / $width); // 省略部分を補う
} else if (preg_match('/^x([0-9]+)$/', $arg, $matches)) {
$params['_size'] = TRUE;
$params['_w'] = $width * ($matches[1] / $height); // 省略部分を補う
$params['_h'] = $matches[1];
// modified add end
// ：
// 省略
// ：
}
// 画像サイズ調整
if ($is_image) {
// ：
// 省略
// ：
// modified start: style指定を設定しておく
//if ($width && $height) $info = "width=\"$width\" height=\"$height\" ";
if ($width && $height) {
$info = ''; // imgタグの直接指定をしないように
$img_style = "style=\"max-width: min({$width}px, 100%); max-height: {$height}px;\"";
}
// modified end
}
widthではなくmax-width指定、heightも同様、imgタグ内にはwidth,heightは出力しない とやっていました。
ただし、拡大表示ができなくなります（拡大しないように改造しました）
***おまけ② [#x8a77e44]
JavaScriptでなんとかしてみる案（やっつけ）です。
50x<br>
<img src="https://pukiwiki.osdn.jp/dev/?plugin=ref&page=BugTrack%2F2266&src=BugTrack2-266_ioio_01_buttonA.png"
width="0" height="0"
onload="this.width=50;this.height=this.naturalHeight*50/this.naturalWidth;"><br>
100x<br>
<img src="https://pukiwiki.osdn.jp/dev/?plugin=ref&page=BugTrack%2F2266&src=BugTrack2-266_ioio_01_buttonA.png"
width="0" height="0"
onload="this.width=100;this.height=this.naturalHeight*100/this.naturalWidth;"><br>
<hr>
x50<br>
<img src="https://pukiwiki.osdn.jp/dev/?plugin=ref&page=BugTrack%2F2266&src=BugTrack2-266_ioio_01_buttonA.png"
width="0" height="0"
onload="this.height=50;this.width=this.naturalWidth*50/this.naturalHeight;"><br>
x100<br>
<img src="https://pukiwiki.osdn.jp/dev/?plugin=ref&page=BugTrack%2F2266&src=BugTrack2-266_ioio_01_buttonA.png"
width="0" height="0"
onload="this.height=100;this.width=this.naturalWidth*100/this.naturalHeight;"><br>
けっこういい感じですが、受信しきるまで表示がされないのが難点。デフォルトは100％表示にするのもいいかも
--------
- エックスではなく、かけるの場合は上手く作動するようです。関連スレ[[BugTrack/2529]] -- [[匿名]] &new{2022-10-26 (水) 20:44:54};
-- コメントありがとうございます。これは、refプラグインではエックスでの指定のみがサイズ指定として実装されていて、かけるの記号は実装されていないため不明な記法だと判断され、サイズ指定がされていないからだと思われます。例としてx130で指定してたのがわかりにくかったので、x65とx260に変えてみました。 -- [[ぬぺぺ]] &new{2022-10-27 (木) 04:34:49};
-- ちょっと超絶横幅で見にくすぎる感じになってたのでかけるの例を除外しました。すみません -- [[ぬぺぺ]] &new{2022-11-01 (火) 17:07:36};
- [[BugTrack/2529]] で実装したときは動いてたと思ったのですが。おかしいですね... -- [[umorigu]] &new{2022-10-27 (木) 21:21:24};
-- あ、誤解しました。スマートフォン表示の時に崩れるということですね。なるほど -- [[umorigu]] &new{2022-10-27 (木) 21:22:43};
-- すみません、書き方が紛らわしかったですね…タイトル直しときます -- [[ぬぺぺ]] &new{2022-11-01 (火) 17:08:06};
- 「省略された方の数値を計算で求め、HTMLのimgタグ中にwidth, heightを両方出力するといい感じになるようです。 （確認：Firefoxのみ）」 URLの場合width, heightは取得できないのでCSSだけでなんとかしたいところではあります -- [[umorigu]] &new{2022-10-27 (木) 23:20:13};
-- なるほど…。URL指定しない派だったので普通に存在を忘れ去っててました。それは困りますね…。 -- [[ぬぺぺ]] &new{2022-11-01 (火) 16:40:05};
-- これは思いつきなのですが、URL指定だった場合はimgタグのonload属性でなんとかするようにできないでしょうか…？適当に試しただけですが、一応うまく動作はしたので追記してみます。 -- [[ぬぺぺ]] &new{2022-11-01 (火) 17:00:48};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
