- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2022-10-26T06:24:55+09:00","default:user","user")
#author("2022-10-26T20:45:44+09:00","","")
* refプラグインで横幅を省略すると縮小表示時にアスペクト比が維持されない [#g7769189]
- ページ: [[BugTrack]]
- 投稿者: [[ぬぺぺ]]
- 優先順位: 普通
- 状態: 提案
- カテゴリー: 本体バグ
- 投稿日: 2022-10-26 (水) 05:12:50
- バージョン: 1.5.4
** メッセージ [#d08148a1]
refプラグインで横幅か縦幅のいずれかを省略可能になりましたが、~
横幅を省略すると縮小表示時にアスペクト比が維持されません。
PC表示だとoverflowした部分が横スクロール表示になりますが、~
スマホ表示だとoverflowしないようになっているためか画像が縮小表示されます。~
その際、縦幅が固定値、横幅がautoなため横幅だけが縮まって画像が歪むようです。
以下、サンプル画像~
（画像は適当に大きそうな画像を [[BugTrack/2266]] からお借りしました。ボタンがレトロだ…）
・サイズ指定なし
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png);|
・x130 を指定：スマホ表示で横幅が狭いと縮む
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x130);|
・x130 を指定 ×3連：同上
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x130);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x130);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,x130);|
***対処法 [#qb5f9314]
%%高さを height ではなく max-height で指定するといい感じになるようです。%%~
拡大表示できなくなるのでダメでした。
省略された方の数値を計算で求め、HTMLのimgタグ中に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は出力しない とやっていました。~
2年ほど運用していましたが一応問題は起きていません。
・追記：↑のコードだと拡大表示ができなくなります（拡大しないように改造したのを忘れてました…）
**×の場合 [#d0857462]
・サイズ指定なし
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png);|
・×130 を指定：スマホ表示で横幅が狭いと縮む
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,×130);|
・×130 を指定 ×3連：同上
|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,×130);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,×130);|&ref(BugTrack/2266/BugTrack2-266_ioio_01_buttonA.png,×130);|
--------
- エックスではなく、かけるの場合は上手く作動するようです。関連スレ[[BugTrack/2529]] -- [[匿名]] &new{2022-10-26 (水) 20:44:54};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
