指定した範囲内に画像を上下中央に配置
投稿日:
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%);
デモ↓

関連記事
-
-
画像クリックで 違う画像やテキストの入ったBOXを表示させる
プラグインなしで、別の画像やテキストをlightboxのように表示させる html <a class="item-demo"> …
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④
1.アイキャッチ画像をカスタマイズ テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …