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

関連記事
-
-
VEGAS BACKGROUND SLIDESHOWの使い方
VEGAS BACKGROUND SLIDESHOWの使い方 画像だけを利用した基本的な使い方 独自で作成したjsファイルがあるならそちらに以下のコードを記述 …
-
-
Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力
いろいろ試してみた結果、やっとできたので覚書として記事にしました。 カスタムフィールドのカテゴリー画像作成 Advanced Custom Fieldsのプラ …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③
9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …