object-fit
・cover
縦横比を保ちながらなるべく大きく表示。
・contain
縦横比を保ちながら画像を中に入れる。
・fill
比率は関係なく、埋める
・none
何もしないで入れる。
#vertical-align
・baselineを基準にどれくらい移動するか。+-で。
・インライン要素のものならなんでも使える。
float
・回り込ませるために使う。
・float:right;で画像を右に寄せる。
・他の要素は通常の配置から外れて、画像がなかったように配置される。
(しかしテキスト、インライン要素は避ける)
・普通にすると、p-2が被ってしまう。その時は、、、
<body>
<p class="p-1">
<img src="logo.png" width="128" height="128">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</p>
<p class="p-2">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</p>
</body>
img {
width: 80px;
height: 80px;
float: right;
}
.p-1 {
display: flow-root;
}
.p-2 {
/* clear: right; */
}
・clear:rightにする。(次の要素を変える。被らないようにする。)
or
・display:flow-rootをつける。(周りこませるやつにつける。それもimgと同じ要素にする。)