JavaScript、flexslider 初心者です。
HTML の上部に JavaScript で flexslider の画像を挿入しました。
すると、画像が左端から右端まで、いっぱいに表示されましたが、画像が大きすぎるので、サイズを小さくして表示することとしました。
まず、flexslider.css で .flexslider .slides img について
width: 50%;
のように変更すると、画像は50%で中央配置になりました。
但し、「左端~画像の左側」及び「画像の右側~右端」に白い部分ができていて、白い部分がジャマです。
次に、flexslider.css で .flexslider について
width: 400px; height: 300px; のように変更、
.flexslider .slides img についても
width: 400px; height: 300px; のように変更。
すると、画像の両端の白い部分は消えました。
但し、もともと中央配置になっていたものが、flexslider の部分(画像部分)だけ左寄せになってしまい、
.flexslider について
margin-right: auto; margin-left: auto;
を記述しても中央配置になりません。
「画像サイズを小さくして」「画像の両端の白い部分は表示せず」「中央揃えする」
にはどのようにすればよいか、ご教示お願い致します。
/* 元々の flexslider.css の記述内容 */
/* 画像が端から端まで、いっぱいに表示されている。 */
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
margin: 0 auto;
display: block;
}
/* .flexslider .slides img について width: 50%; のように変更すると、画像は50%で中央配置になる。 */
/* 但し、「左端~画像の左側」及び「画像の右側~右端」に白い部分ができる。 */
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 50%;
margin: 0 auto;
display: block;
}
/* .flexslider について width: 400px; height: 300px; のように変更、*/
/* .flexslider .slides img についても width: 400px; height: 300px; のように変更 */
/* すると、画像の両端の白い部分は消える。 */
/* 但し、もともと中央配置になっていたものが、flexslider の部分だけ左寄せになってしまう。 */
/* .flexslider について margin-right: auto; margin-left: auto; を記述しても中央配置にならない。 */
.flexslider {
margin-right: auto;
margin-left: auto;
padding: 0;
width: 400px;
height: 300px;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 400px;
height: 300px;
margin: 0 auto;
display: block;
}
No.1ベストアンサー
- 回答日時:
こんにちは
flexsliderは存じませんが・・・
質問文には記載されていませんが、.flexslider要素の表示位置関係(親要素が何か、positionn:absolute等で表示していないか)や自身の要素種別(ブロックorインライン)などが影響している可能性があります。
CSSの設定が他のCSSで打ち消されている可能性も考えられますので、ひとまず、要素内の属性として
style="margin:0 auto;"
などを設定しても左寄せのままかどうかを確認してみます。
これで変わらない場合は、自身がブロック要素になっているかや親要素との関係を調べてください。
さらには、position指定がどうなっているかを確認すれば、どこかで原因が発見できるのではないかと想像します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のランダム表示、及び画像...
-
WEBページ立ち上げ時に1回のみ...
-
表と裏がある1枚の画像を回転す...
-
onmouseで画像の切り替えについて
-
CSSで背景をランダム表示さ...
-
jQueryで特定のURLの時のみ表示
-
ページを更新しないで・・・
-
<EMBED>タグのSRCの値のみ変更
-
java scriptで現在のURLで条件分岐
-
オンマウスで画像が切り替わっ...
-
サムネイルをクリックすると画...
-
javaを使ってマウスオンでの画...
-
Javascriptで指定した日付と時...
-
オンマウスで、画像切り替え+...
-
2つの別ウインドウの表示
-
リンク先がそれぞれ別の画像の...
-
キャッシュされた画像を使わず...
-
FancyZoom (javascriptで画像拡...
-
表示する画像をファイル名を受...
-
画像の重なりの順序を代える方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報