UserCSS:画像配置

code:style.css

/* 画像配置のいろいろな設定 */

.line .text, .stream .line { clear: both; overflow: hidden; }

.line .deco-\, img.image { float: left; margin-right: .5em; }

.stream .line .deco\, img.image { float: none; margin-right: 0; }

.line .text, .stream .line { clear: both; overflow: hidden }

.line .deco-\. img.image { float: right; margin-left: .5em }

.stream .line .deco\. img.image { float: none; margin-left: 0 }

/* 画像のサイズを変える */

.level-1 img {

display: none !important;

}

.level-2 img {

width: 16.7%; max-height: none; }

.level-3 img {

width: 33%; max-height: none; }

.level-4 img {

width: 50%; max-height: none; }

.level-5 img {

width: 83.3%; max-height: none; }

.level-6 img {

width: 100%; max-height: none; }

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\& { display: inline-flex }

.line .deco-\& img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\& > span { width: calc(100%/1) }

.line .level-2 .deco-\& > span { width: calc(100%/2) }

.line .level-3 .deco-\& > span { width: calc(100%/3) }

.line .level-4 .deco-\& > span { width: calc(100%/4) }

.line .level-5 .deco-\& > span { width: calc(100%/5) }

object-fit: cover;

width: 100%;

height: 100%;

}

https://img.shields.io/badge/UserCSS-画像配置-1572B6.svg?logo=css3&style=for-the-badge