ページ幅に合わせて拡大
https://i.gyazo.com/c2f909144f4917de6d4ffda66a697ba1.png
ほぼページ幅(編集領域)いっぱいに画像を拡大表示します。
インデントは無視してセンタリング。
上にかぶせてテキストや画像を配置できます。
タイトルを付けることもできます。
https://i.gyazo.com/0c5e6454769fab3ce53f662973f4335c.png 小さい画像でも拡大します! ピンボケするけど・・・ アスペクト比は維持されます。
https://gyazo.com/f1238cde3e388e85acaf765b4c511e8f https://i.gyazo.com/ce8666be30869effc10245fcbf543e9f.png
縦長の画像を貼り付けると、長い背景になります。
[>%< [画像URL]] 画像をページ幅まで拡大
[>%< [画像URL] テキスト] タイトル付きの背景画像
[>%< テキスト] テキストのみのタイトル表示 (サブタトル用)
テキストはStrongLevel(*)で拡大可能 例: [***>%< テキスト]
code:style.css
display: block;
position: absolute;
width: 100%;
max-width: 100%;
min-width: 100%;
left: 0px;
text-align: center; /* センタリング */
letter-spacing: 0.2em;
font-weight: 600;
font-size: 110%; /* やや大きい文字で */
z-index: 0;
}
position: absolute;
display: inline-block;
object-fit: cover;
width: 99.5%;
min-width: 99.5%;
max-width: 99.5%;
left: 0.5%; /* 左端のカーソルが見える位置に ちょっとずらす */
max-height: none;
margin: 2px auto;
z-index: -1; /* 前後調整 他の要素との関係に注意 */
}
margin-top: 1.40em; /* 上側に少し間を確保 */
}
font-size: 2.8vw;
line-height: 1.2em;
white-space: pre; /* プレゼンのタイトルにする場合 要調整! */
}
UserCSS.icon