質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

11560閲覧

bxsliderで大きさの違う画像で小さい画像をセンターに持ってくるには?

kolon.m

総合スコア69

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/07/13 22:11

大きさの違うというのは、縦横のpx等が違うということです。
大きい画像をスライダーにいれた時、小さい画像は上に寄ってしまいます。
自分はそれをど真ん中に持ってきたいのですが、どうすればよろしいでしょうか?

lang

1<script> 2 $(function(){ 3 $('.slider').bxSlider({ 4 auto: true, 5 infiniteLoop: true, 6 speed: 1000, 7 maxsliders:3, 8 minsliders:3, 9 moveSlides: 1, 10 slideMargin:30 11 }); 12}); 13</script> 14

lang

1<center> 2 <div id="bxwrap"> 3 <ul class="slider"> 4 <li class="slide"><img src="hoge".gif"></li> 5 <li class="slide"><img src="hoge.gif"></li> 6 <li class="slide"><img src="hoge.png"></li> width,height:300px 7 <li class="slide"><img src="hoge.png"></li>//width1280px height800px 8 </ul> 9 </div> 10 </center>

lang

1.slider { 2 list-style: none; 3 margin: 0; 4 padding: 0; 5 } 6.bx-wrapper { 7 position: relative; 8 margin: 0 auto 60px; 9 padding: 0; 10 *zoom: 1; 11} 12 13.bx-wrapper img { 14 max-width: 100%; 15 display: block; 16} 17 18/** THEME 19===================================*/ 20.bx-wrapper .bx-viewport { 21 -moz-box-shadow: 0 0 5px #ccc; 22 -webkit-box-shadow: 0 0 5px #ccc; 23 box-shadow: 0 0 5px #ccc; 24 border: 5px solid #fff; 25 left: -5px; 26 background: #fff filter:alpha(opacity=50) //透明指定 27 -moz-opacity: 0.5 //透明指定 28 opacity: 0.5; //透明指定 29 30 /*fix other elements on the page moving (on Chrome)*/ 31 -webkit-transform: translatez(0); 32 -moz-transform: translatez(0); 33 -ms-transform: translatez(0); 34 -o-transform: translatez(0); 35 transform: translatez(0); 36} 37 38.bx-wrapper .bx-pager, 39.bx-wrapper .bx-controls-auto { 40 position: absolute; 41 bottom: -30px; 42 width: 100%; 43} 44

その他のCSSは公式から持ってきた物です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

一定サイズのスライダー領域(li.slide?)の中で、
画像が上下左右中央揃えで配置されればいいんですよね?
今の構造のままCSSでなんとかできる可能性としては、

(1)position:absolute;で上下中央揃え
(2)display:table-cell; + vertical-align:middle;で上下中央揃え

といった手法が検討できると思います。
セレクタは具体的に今回のスライダーに合わせて変更していただく必要はありますが、
理論的には以下のような形でなんとかできるのではないでしょうか。
(試してないのでダメだったらすみません)

▼position:absoluteの場合

css

1li.slide{ 2 position:relative; 3 width: 1280px; 4 height: 800px; 5} 6 7li.slide img{ 8 position: absolute; 9 left:0; 10 right:0; 11 top:0; 12 bottom:0; 13 margin: auto; 14}

▼display:table-cell;の場合(liの中にdiv1つ追加)

html

1<ul class="slider"> 2 <li class="slide"><div><img src="hoge".gif"></div></li> 3 <li class="slide"><div><img src="hoge".gif"></div></li> 4 <li class="slide"><div><img src="hoge".gif"></div></li> 5</ul>

css

1li.slide{ 2 width: 1280px; 3 height: 800px; 4 display:table; 5 table-layout: fixed; 6} 7 8li.slide >div { 9 width: 1280px; 10 height: 800px; 11 display: table-cell; 12 vertical-align: middle; 13}

いずれも固定サイズスライダーの前提なので、
レスポンシブだったりするとうまくいかないかもしれません。(特にdisplay:table-cell)

投稿2015/07/16 04:52

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kolon.m

2015/07/19 00:48

有難うございます!(position:absoluteの場合)思ったとおりできましたが、スマホとかで表示する時とか少し不安ですね... 個人的な見解ですが、width height ともに100% であれば スマホとかに収まる気がします。
aKusano

2015/07/20 14:28

過去に何度かレスポンシブ+スライダー+コンテンツを上下左右中央揃えで作ったことはありますが、widthはともかくheightも可変になると結構難しかった記憶があります。 高さ固定で幅だけ可変なら特に問題は出なかったかと。。。
guest

0

この情報だけでは具体的な原因はちょっと分かりかねますが、.bx-wrapper img のmax-widthに100%が設定されているからかな...?上に寄っているときに、chromeのデバッガ等でその要素にどんなCSSが適用されているかを調べてみると解決の糸口になるかと思います。

スライダーのjsをちょっと改造すれば解決できそうですが、
難しそうなら以下の方法のどちらかでやりたいことはとりあえず実現できるかと思います。

(1)全て同じサイズの画像を用意する
(2)スライダーの<li>要素に<img>を挿入するのではなく、同じサイズの空要素(<div>など)を入れておき、その要素のbackgroundに画像を指定する。あとは、background-positionとかbackground-sizeとかいじればどうにでもなる。

投稿2015/07/14 11:09

編集2015/07/14 11:15
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問