指定した範囲内に画像を上下中央に配置

divなどで指定した部分に、画像を配置

上下中央にする方法は他にもありますが、

今回は、『position』を使ってみます。

html

<div class="divbox">
<img src=xxxxx.jpg alt="xxxx" >
</div>

css

.divbox{
position: relative;
width:500px;
height:300px;
overflow:hidden;
}
.divbox img{
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

デモ↓