元画像サイズそのままで表示するCSS

https://gyazo.com/c480dc0842707081b8536779e4c53ab8

デフォルトで張り込んだ画像は、

max-width: 100%; 　

max-height: 300px;　

で表示され、インデントをかけるとページ右端を超えないよう自動的に調整されます。

レイアウトに手間いらずで、便利な仕様です。

しかしながら、　個人的なプロジェクトで、画質（画素）を見たいときが多々あって

実寸（ピクセル等倍）で表示する

インデントによる自動調整なし

ページをはみ出てもクリップしない

を作りました。

https://gyazo.com/8a822ffb56162d462c03e5ea1ac41a1e

code:style.css

.line .deco-\< img.image {

/* position: absolute !important; */ 　 /* お好みで　重ね合わせ表示を許す */

object-fit: contain;

width: none;

max-width: none;

height: none;

max-height: none;

}

UserCSS.icon