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

メッセージ

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

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

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

・サイズ指定なし(高さ130px)

BugTrack2-266_ioio_01_buttonA.png

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

BugTrack2-266_ioio_01_buttonA.png

・x65 を指定 ×5連:同上

BugTrack2-266_ioio_01_buttonA.pngBugTrack2-266_ioio_01_buttonA.pngBugTrack2-266_ioio_01_buttonA.pngBugTrack2-266_ioio_01_buttonA.pngBugTrack2-266_ioio_01_buttonA.png

・x260 を指定:同上

BugTrack2-266_ioio_01_buttonA.png

対処法案

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

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

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

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

おまけ

最終的にうちの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; /* 追加 */
  }



トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2022-11-29 (火) 17:56:33
Site admin: PukiWiki Development Team

PukiWiki 1.5.4+ © 2001-2022 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.341 sec.

OSDN