異なる画像サイズを一定サイズのカードで表示したい。元画像をそのまま指定したheight, widthで表示した場合、縦長、横長の画像は圧縮されてしまう。どうしたら良いか。
昔、先輩に教わったのだが、システムでは表示する際にデータを装飾することはあっても、基本的に元データそのものを加工・変更してはいけない。
ということで、表示を揃えるためにアップロードした画像をサーバーサイド側で切り抜くのは気が引けていた。
少し調べたら、CSSのobject-fitでアスペクト比を維持したまま処理できるらしい。
contain: アスペクト比を維持したままボックスに収まるよう拡大縮小
cover: アスペクト比を維持したまま、コンテンツボックスを埋めるよう拡大縮小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.contain img {
width: 200px;
height: 150px;
object-fit: contain;
}
.cover img {
width: 200px;
height: 150px;
object-fit: cover;
}
.fill img {
width: 200px;
height: 150px;
object-fit: fill;
}
</style>
</head>
<body>
<div class="contain">
<img src="img/bridge1.jpg"><br>
<img src="img/bridge2.jpg">
</div>
<br>
<div class="cover">
<img src="img/bridge1.jpg"><br>
<img src="img/bridge2.jpg">
</div>
<br>
<div class="fill">
<img src="img/bridge1.jpg"><br>
<img src="img/bridge2.jpg">
</div>
<script>
</script>
</body>
</html>
coverだと、画像が切れる恐れがあるから、containが一番しっくり来るな。
