指定した範囲内に画像を上下中央に配置
投稿日：
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%);
デモ↓
関連記事
-
-
シンプル予約システム MTS Simple Bookingを使う WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …
-
-
ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …
-
-
スクロールバーをカスタマイズできるプラグインjQuery custom content scrollerを試してみた
WordPressでスクロールバーをカスタマイズ 別にスクロールバーは変えなくてもいいんじゃない？って思っているかもしれませんが、 実は、あるサイトを作っていて変えたくなったんです。 そ …
-
-
小さい画像（写真）をホームページのデザインに合わせて、きれいに大きくしたい時に役立つwebサービスが『waifu2x-multi』 普通に拡大してしまうと、どうしても画像が …
-
-
WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい！ 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …
