BugTrack/2580

refプラグインで横幅を省略するとスマホ版で縮小表示時にアスペクト比が維持されない†

• ページ: BugTrack
• 投稿者: ぬぺぺ
• 優先順位: 普通
• 状態: 提案
• カテゴリー: 本体バグ
• 投稿日: 2022-10-26 (水) 05:12:50
• バージョン: 1.5.4

メッセージ†

refプラグインで横幅か縦幅のいずれかを省略可能になりましたが、
横幅を省略するとスマホ版で縮小表示時にアスペクト比が維持されません。

PC表示だとoverflowした部分が横スクロール表示になりますが、
スマホ表示だとoverflowしないようになっているためか画像が縮小表示されます。
その際、縦幅が固定値、横幅がautoなため横幅だけが縮まって画像が歪むようです。

以下、サンプル画像
（画像は適当に大きそうな画像を BugTrack/2266 からお借りしました。ボタンがレトロだ…）

・サイズ指定なし（高さ130px）

・x65 を指定：スマホ表示で横幅が狭いと縮む

・x65 を指定 ×5連：同上

・x260 を指定：同上

対処法案†

① 高さを height ではなく max-height で指定するといい感じになるようです。
⇒ 拡大表示できなくなるのでダメでした。拡大を諦めればいい案…

② 省略された方の数値を計算で求め、HTMLのimgタグ中にwidth, heightを両方出力するといい感じになるようです。
（確認：Firefoxのみ）
⇒ URL表記をした際にダメなようです。

③ JavaScriptで画像受信後にonload属性でwidth, heightを指定（おまけ②）

④ object-fit:contain を指定（万能だがちょっと隙間ができる）

おまけ†

最終的にうちのwikiで施した対応です。 ↑の①②④を使ってます
※ あくまでもうちのwikiではだいたいこうした、という内容です。対処法ではないです（割と副作用あります）

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) && $width > 0) {
			// preg_matchが二度手間なので公式実装され次第↓とまとめる
			$params['_size'] = TRUE;
			$rate = $matches[1] / $width;
			$params['_w'] = $matches[1];
			$params['_h'] = $height * $rate;  // 省略部分を補う
		} else if (preg_match('/^x([0-9]+)$/', $arg, $matches) && $height > 0) {
			$params['_size'] = TRUE;
			$rate = $matches[1] / $height;
			$params['_w'] = $width * $rate;  // 省略部分を補う
			$params['_h'] = $matches[1];
		// modified add end

		} else if (preg_match('/^([0-9.]+)%$/', $arg, $matches) && $matches[1] > 0) {
			$params['_%'] = $matches[1];
		} else if (preg_match('/^([0-9]+)x$/', $arg, $matches)) {
			$params['_size_auto_aspect_ratio'] = TRUE;
			$params['_w'] = $matches[1];
		} else if (preg_match('/^x([0-9]+)$/', $arg, $matches)) {
			$params['_size_auto_aspect_ratio'] = TRUE;
			$params['_h'] = $matches[1];
		} else if (preg_match('/^([0-9]+)w$/', $arg, $matches)) {
			$params['_size_auto_aspect_ratio'] = TRUE;
			$params['_w'] = $matches[1];
		} else if (preg_match('/^([0-9]+)h$/', $arg, $matches)) {
			$params['_size_auto_aspect_ratio'] = TRUE;
			$params['_h'] = $matches[1];
		} else {
			$_title[] = $arg;
		}
	}

	if (! empty($_title)) {
		$title = htmlsc(join(',', $_title));
		if ($is_image) $title = make_line_rules($title);
	}
}

// 画像サイズ調整
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
}

//  ：
// 省略
//  ：
// Size with auto aspect ratio
if ($is_image) {
	if ($params['_size_auto_aspect_ratio']) {
		// modified start: object-fit:contain を追加
		if ($params['_w']) {
			//$info = trim($info) . " style=\"width:" . $params['_w'] . "px;height:auto;\"";
			$info = trim($info) . " style=\"width:" . $params['_w'] . "px;height:auto;";
		} else if ($params['_h']) {
			//$info = trim($info) . " style=\"width:auto;height:" . $params['_h'] . "px;\"";
			$info = trim($info) . " style=\"width:auto;height:" . $params['_h'] . "px;";
		}
		if ($params['_w'] || $params['_h']) {
			$info .= "object-fit:contain;\"";
		}
		// modified end
	}
}

なお、拡大表示ができなくなります（拡大しないように改造しました）

おまけ②†

JavaScriptでなんとかしてみる案（やっつけ）です。

50x<br>
<img src="https&#58;//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&#58;//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&#58;//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&#58;//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％表示にするのもいいかも

CSSで対応†

skin/pukiwiki.css 761行目 object-fit:scale-downでも似たような表示になる

div#body img {
    max-width:95%;
    height:auto;
    object-fit:contain; /* 追加 */
  }

• エックスではなく、かけるの場合は上手く作動するようです。関連スレBugTrack/2529 -- 匿名 2022-10-26 (水) 20:44:54
  • コメントありがとうございます。これは、refプラグインではエックスでの指定のみがサイズ指定として実装されていて、かけるの記号は実装されていないため不明な記法だと判断され、サイズ指定がされていないからだと思われます。例としてx130で指定してたのがわかりにくかったので、x65とx260に変えてみました。 -- ぬぺぺ 2022-10-27 (木) 04:34:49
  • ちょっと超絶横幅で見にくすぎる感じになってたのでかけるの例を除外しました。すみません -- ぬぺぺ 2022-11-01 (火) 17:07:36
  • こちらの勘違いだったのですね、ありがとうございます。CSSのobject-fitプロパティを使うのはいかがでしょうか。レガシーブラウザへ対応する場合は各自JSで　-- 匿名 2022-11-02 (水) 05:21:37
  • object-fit いいですね！これ採用させてください。ありがとうございます -- umorigu 2022-11-05 (土) 10:29:00
  • すごい！！カンペキです！！！うちのwikiにも使わせて頂きました！ありがとうございますー！！ -- ぬぺぺ 2022-11-23 (水) 23:21:31
  • object-fit:containでしばらく運用してみたのですが、どうしても周囲に隙間が入ります。（border:solidにするとわかりやすいです） 通常はPHP側で計算しておく方法をとって、URL指定だったりファイルが壊れていたりで$width==0や$height==0のときだけobject-fit指定をするようにしました。 -- ぬぺぺ 2022-11-29 (火) 17:45:16
• BugTrack/2529 で実装したときは動いてたと思ったのですが。おかしいですね... -- umorigu 2022-10-27 (木) 21:21:24
  • あ、誤解しました。スマートフォン表示の時に崩れるということですね。なるほど -- umorigu 2022-10-27 (木) 21:22:43
  • すみません、書き方が紛らわしかったですね…タイトル直しときます -- ぬぺぺ 2022-11-01 (火) 17:08:06
• 「省略された方の数値を計算で求め、HTMLのimgタグ中にwidth, heightを両方出力するといい感じになるようです。 （確認：Firefoxのみ）」 URLの場合width, heightは取得できないのでCSSだけでなんとかしたいところではあります -- umorigu 2022-10-27 (木) 23:20:13
  • なるほど…。URL指定しない派だったので普通に存在を忘れ去っててました。それは困りますね…。 -- ぬぺぺ 2022-11-01 (火) 16:40:05
  • これは思いつきなのですが、URL指定だった場合はimgタグのonload属性でなんとかするようにできないでしょうか…？適当に試しただけですが、一応うまく動作はしたので追記してみます。 -- ぬぺぺ 2022-11-01 (火) 17:00:48

• BugTrack
• 開発版
  • リポジトリ
  • 開発日記
• :CategoryDev
  • PukiWiki2
  • PukiWiki/1.5
  • PukiWiki/1.4
  • PukiWiki/1.3
  • メーリングリスト
  • 開発談義
  • 雑談
• 開発者向け情報
  • Books
  • プラグイン

最新の16件