実現したいこと
- 縦画像は縦100%、横はauto
- 横画像は縦も横も100%、object-fit: coverでトリミングし、要素いっぱいに画像を表示
- どのwindow幅でも3:2の枠を崩さず、枠内に画像を表示
DEMO
DEMO
１.縦100%、横auto
2.縦横100% ＋ トリミング
3.外枠は3:2を維持
※ 3は windowの横幅を狭めたり、広げたりすると枠内の 〇〇px が変わると思います。
HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="block-image">
<img src="画像パス" alt="縦画像">
</div>
</div>
<div class="col-6">
<div class="block-image">
<img src="画像パス" alt="横画像">
</div>
</div>
</div>
</div>jQuery
- ページの読み込みと同時に関数実行
- ウィンドウ幅がリサイズされた時に再度実行する
$(function(){
// 関数実行
resizeBlockHeight();
// 画面サイズがリサイズされたら再度読み込む
$(window).resize(function() {
resizeBlocknHeight();
});
// 初期表示
$('.block-image img').each(function(element) {
// 画像の高さ
let height = $(this).height();
// 画像の横幅
let width = $(this).width();
// 横画像の場合は縦横100%でトリミング
if(width > height) {
$(this).css('height', '100%');
$(this).css('width', '100%');
$(this).css('object-fit', 'cover');
} else {
// 縦画像の場合は高さ100%で横幅は自動
$(this).css('height', '100%');
$(this).css('width', 'auto');
}
})
});
function resizeBlockHeight() {
let block_width = $('.block-image').width();
// 画像を囲っている枠を横3:縦2のサイズで固定
let block_image_height = (block_width*2) / 3;
$('.block-image').css('height', block_height + 'px');
}
