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つまで。