ホーム > ブログ > マスクエリアの中央に画像を表示

Webデザイナー ブログ

マスクエリアの中央に画像を表示

2019年2月12日(javascript)

簡単そうで以外と難しかったのでメモ。

たぶんcssだけではできないのでjsを使用。
マスクエリアにたいして自由な大きさの画像を配置しいい感じに拡大縮小して
隙間なく画像を中央に引くコード。
たぶん出来てると思う。

<html>
<head>
<style>
div {
width:300px;
height:300px;
position:relative;
overflow: hidden;
margin: 1em;
background: #ddd;
}
img {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>

<body>
<div><img src=”01.png”></div>
<div><img src=”02.png”></div>
<div><img src=”03.png”></div>
<script src=”https://code.jquery.com/jquery-3.3.1.js”></script>
<script>
$(“div”).each(function(i,e) {
var w = $(this).width();
var h = $(this).height();
var iw = $(this).find(“img”).width();
var ih = $(this).find(“img”).height();
//横の縮小率を調べる
var wrasio = iw / w;

//マスクエリアに対して高さが満たない画像だったら
if(ih / wrasio < h) {
$(this).find(“img”).height(h);
} else {
$(this).find(“img”).width(w);
}
});
</script>
</body>
</html>

人気ブログランキングへ
応援お願いします!

コメントをどうぞ