javascriptに関連してのCSS (object-fit)

■CSSのobject-fitプロパティを見てみた。
ブラウザ上で何かをクリックしたときにjavascriptで画像を表示させたいけど、画像サイズをうまく調整する方法がないか探した。すると、object-fitプロパティというものを使うと、サイズの縦横比を維持した状態で指定したサイズのフレームからはみ出した部分をカットなどしてくれるよう。

作ったサンプルコードが下。

ブラウザのhtmlファイル(sample005.html)。

<html>
<head>
    <meta charset="utf-8">
    <title>sample005</title>
    <link href="sample005.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="sample005.js"></script>
</head>
<body>
<div>
<img src="./sample005_background.png" onclick="sample005_click(0, event)">
</div>
</body>
</html>

上のhtmlファイルで参照するjavascript(sample005.js)。

window.onload = function () {
    document.body.scrollHeight = 1200;
}

$(function () {
    $("body").append("<div id='glayLayer'></div>")
    $("body").append("<div id='Frame'>")
    $("#Frame").append("<div id='picFrame'>")

    $("#glayLayer").click(function () {
        $(this).hide()
        $("#glayLayer").hide()
        $("#Frame").remove()
        $("body").append("<div id='Frame'>")
        $("#Frame").append("<div id='picFrame'>")
    })
});

function sample005_click(i, event) {

    let mX = 0;
    let mY = 0;
    mX = event.pageX;
    mY = event.pageY;
    scrollY = document.body.scrollTop;
    window.alert("aaaX:" + mX + "bbbY:" + mY + "cccY:" + scrollY);

    if (document.getElementById('Frame')) {
        $("<img src= 'sample005_showPic.png' id=pic001>").appendTo("#picFrame");
        $("#Frame").css('left', mX + 'px');
        $("#Frame").css('top', (mY - scrollY) + 'px');
        $("#Frame").show();
        $("#glayLayer").show();
    } else {

    }
}

上のhtmlファイルで参照するCSSファイル(sample005.css)。

#pic001{
    width:100%;
    height:100%;
    border: solid 1px grey;
    border-radius: 0px;  
    object-fit:contain;
}

#Frame{
    width:300px;
    height:100px;
    position: absolute;
    display:none;
}

#glayLayer{
    display:none;
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:#7BAEB5;
    filter:alpha(opacity=75);
    opacity: 0.75;
}

後は、適当な画像ファイル2つとjQueryを使うのでそのファイル(jquery-3.5.1.min.js)を入れて下記のような構成となる。


htmlファイルを実行するとsample005_background.pngが表示される(青色系の長方形)。

これをクリックすると、sample005_click関数が実行される(下)。透過レイヤーが入りその上に、フレーム(幅300px, 縦100px)とその中に画像が入る(黄色枠の赤塗)。

上は、object-fitプロパティが contain の状態。画像が縮小されフレーム内に入る。フレームと一致しない部分はおそらくフレームの背景が表示されている。このプロパティを cover にした状態が下。

横幅がフレームに一致。縦方向はフレームからはみ出すので、その部分はフレームに合わせてカット。

他にも指定できる値はあるけど、今回はこの2つまで。