ブログシステムを構築している際に、アイキャッチサムネイルのIMGタグで表示している画像をどうしてもセンタリングしたかったのだが、なかなか思い通りに行かず、四苦八苦したので、途中過程と結果できたソースコードを公開。
概要と要件定義
まず、何がやりたかったのかと言うと、下記の様なブログサイトを作った時に、サムネイル画像の元サイズが様々な大きさの場合に、一定に揃えたいという要望があった。
この時のDOM構造は、以下の様になっている。
この時に、全てのサムネイルの画像サイズが同じであれば、全く問題ないのだが、世の中そうもいかない。
柔軟なシステム対応を考えると、画像はできる限りDIVの幅に合わせて、余白が出る事の内容にmin-widthとmin-heightは100%をセット。
さらに、それではみ出た部分をトリミングして、且つ、画像は中心部分を表示するのが、一番問題がなさそうなので、センタリングするというしようにする。
まとめると、仕様としては以下の通り
・構成は、上記DOM構造とする。
・IMGタグは全ての項目で同じサイズになるようにDIVタグで調整。
・IMGタグとDIVタグには隙間が内容に、minサイズを100%とする。
・IMGタグのはみ出た部分はトリミングする。
・IMGタグの画像は、中央表示する。
text-align=centerは左基準
まずハマったのが、トリミングってなかなか難しいと言う事。トリミング自体は「overflow:hidden;」でいいのだが・・・
画像がDIVタグよりも小さい場合は、以下の記述でいいのだが、今回はmin１００％のため、全てをはみ出す事前提で考える。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>Trim</title>
<link rel="stylesheet" href="common.css"/>
</head>
<body>
<ul>
<li>
<a href="//google.com">
<div>
<img src="sample.jpg">
</div>
</a>
</li>
</ul>
</body>
</html>
li{
width:200px;
height:200px;
margin:0;
padding:0;
border:1px solid black;
list-style:none;
}
a{
width:100%;
height:100%;
margin:0;
padding:0;
}
div{
width:100%;
height:100px;
overflow:hidden;
text-align:center;
}
img{
min-width:100%;
min-height:100%;
height:100%;
}
少しわかりにくいですが、画像が左寄せで表示されてしまいます。
text-alignは、サイズオーバーの場合は全く機能しないんですね。
完成ソースコード
そして、以下の方法にたどり着きました。
li{
width:200px;
height:200px;
margin:0;
padding:0;
border:1px solid black;
list-style:none;
}
a{
width:100%;
height:100%;
margin:0;
padding:0;
}
div{
width:100%;
height:100px;
overflow:hidden;
text-align:center;
position:relative;
}
img{
min-width:100%;
min-height:100%;
height:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
top,left,transformにより、センタリングを実現できるんですね。
途中で心が折れて、imgタグではなく、background-imageを使おうかとも考えたんですが、
imgタグもそのまま使えて、この方法が最適であることがわかります。
何はともあれ、目的は達成され、divのサイズが変わっても、imgタグは正常にセンタリングを保ちながら、拡縮されていきます。
なんとなく裏技っぽい記述になったので、ブログ記事にしておきました。
気になる人はコピペで使ってください。
ちなみに、詳細を書きませんでしたが、DIVとIMGタグの、position設定も忘れない様にしてくださいね。
0 件のコメント:
コメントを投稿