0

フレックススライダーjqueryプラグインを使用しています

スライダー内の画像を動的な幅と高さで一元化するにはどうすればよいですか？

<div class="flexslider">
    <ul class="slides">
        <li><img .../></li>
        <li><img .../></li>
    </ul>
</div>

ul.slides li
{
  margin: 0px; padding: 0px;
  text-align:center;
}

ul.slides li img
{
  width: 100%;
  /*display: table-cell; vertical-align: middle; does not work*/
}
4

10 に答える 10

2

良い解決策が必要な場合は、jQuery UI position() 関数を使用できます。それ以外の場合は、次のクエリを使用します。

$(".slides li img").each( function() {
    var w = $(this).width();
    var h = $(this).height();
    var wi = $(this).parent().width();
    var he = $(this).parent().height();
    var margintb = ((he-h)/2);
    var marginlb = ((wi-w)/2);
    $(this).css({ "margin": margintb+"px "+marginlb+"px" });
});

そして、次を使用して CSS ベースのソリューションを使用できます。

li img {
    margin:0 auto;
}
li {
    line-height: *px;
}

* は li 要素の高さであり、動的な幅と高さがある場合、いくつかの jQuery が機能します。

$(".slides li").each( function() {
    var s = $(this).height();
    $(this).css({ "line-height" : s+"px" });
});
于 2013-01-24T03:54:49.057 に答える
2

これは、シンプルで効果的な jQuery ソリューションです。上記の他の回答とは大きく異なるため、これを新しい回答として追加します。

CSS の方法は面倒なようで、@ user1743214 の提案が FlexSlider で機能するかどうかは完全にはわかりません。

いくつかの FlexSlider コードを複製し、JSFiddle に設定しました。アニメーションなどではありませんが、適切な構造とスタイルがあります。

http://jsfiddle.net/cmp3R/1/

jQuery コード (利便性/アーカイブ用)

$('.slides li').each( function() {
    var height = $(this).height();
    var imageHeight = $(this).find('img').height();

    var offset = (height - imageHeight) / 2;

    $(this).find('img').css('margin-top', offset + 'px');

});

CSS の変更

<li>各スライドのラッパーの高さを設定する必要があります。CSSでこれを行うだけです。

jQuery

スライダー (つまり X) と画像 (つまり Y) の高さを取得し、差を取得し、差の半分を取得してから、その量だけ画像を下に移動するインライン スタイルを追加します。すなわち。

= (x-y)/2

each() を使用してスライダーの各スライドに対してこれを実行する必要があり、垂直方向の中央に配置されるように正しい量だけオフセットする必要があります。

プラグインのレスポンシブ機能を使用している場合、これが問題であることがわかりますが、クエリ<li>を使用して画面サイズごとに異なる高さを設定するだけで回避できます.@media

それが役立つことを願っています。

于 2013-01-24T04:31:23.823 に答える
1

img で text-align: center を使用してみることができます

于 2013-01-24T03:49:28.713 に答える
0

あなたの問題を完全に理解しているかどうかはわかりません。

ul.slides li img {
   width: 100%;
  /*display: table-cell; vertical-align: middle; does not work*/
}

スライダーと同じ幅の画像を作成しているので、配置は問題になりませんか?

とにかく、（FlexSliderでテスト済み）<li>を使用して画像を中央に配置できます。margin:auto

しかし、スライダー自体を中央に配置しようとしていますか?

編集：垂直方向に整列するには、試すことができますdisplay: inline-block; vertical-align: middle;

于 2013-01-24T03:58:04.360 に答える
0

flexslider コンテナの li タグ内に高さ固定の div タグを作成してはどうでしょうか。

<div class="flexslider">
    <ul class="slides">
        <li>
            <div class="mydiv">
                <img ...>
            </div>
        </li>
    </ul>
</div>

.mydiv{height: 200px; display: table-cell; vertical-align: middle}
于 2014-04-06T06:05:21.393 に答える
0

だから私はflexsliderで同じことを達成しようとしていました.これが私がやった方法です:

var centerImage = function (sliderH, n) {
  var $current = $('.js-slider .slides li img').eq(n);

  $current.css({
    'position' : 'relative',
    'top' : (sliderH - $current.height())/2
  });
};


$('.js-slider').flexslider({
  /* 
    other flexslider parameters 
  */
  start: function (slider) {
    centerImage(slider.h, slider.currentSlide);
  },
  before: function (slider) {
    centerImage(slider.h, slider.animatingTo);
  }
});

コードは一目瞭然です。お役に立てば幸いです。

于 2014-03-27T18:56:32.210 に答える
0

cssの方法でこれをまとめるだけです..頭痛の種を減らしたい場合は、次のようにします

.image {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   height: 200px;
   margin-top: -100px; /* half the height */
   margin-left: -100px; /* half the width */
}

このタイプは in line centering と呼ばれます。これは、これらのスタイルをオブジェクトに in line で適用できることを意味します。

現在、もう一方の方法はもう少し複雑ですが、広く使用されていますが、div を使用して適用され、表示がテーブルに変更されていることがわかります。

html, body, #cont {
   height:100%; // set the height to be the full page  , as well as the width
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#cont td {
   vertical-align: middle;
   text-align: center;
}

html マークアップ

<html>
<body>
   <table id="cont">
      <tr>
         <td><img src="image.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

必要に応じて、このトピックについてさらに詳しく検索できます..

jquery 部分については、プラグインを検索するか、@Aspiring Aqib によって提案されたコードを使用できます。

彼のコードは、インライン センタリング手法に似ています

于 2013-01-24T04:11:26.697 に答える
0

画像のリストのみに影響を与える水平方向の中央に自動マージンを使用してみてください。margin-top垂直方向にも中央揃えにしmargin-bottomたい場合は、設定する必要があるかもしれません。

li img
{
  margin-left: auto;
  margin-right: auto;
}
于 2013-01-24T03:53:57.813 に答える
0

<li>これは、画像や高さが分からないという問題も解決するトムのソリューションの修正版です。

最も高い高さを見つけて、<li>すべての画像<li>をその高さに調整します。

$(document).ready(function () {
    var maxHeight = -1;

    $('.slides li').each(function () {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $('.slides li').each(function () {
        $(this).height(maxHeight);
    });
});

各 の直前に要素を挿入します<img>。

$(function () {
    $('img').before('<span class="vert-center"></span>');
});

新しい要素を親の 100% に設定し、<li>それと画像を垂直方向に揃えます。

.slides {
    text-align: center;
    position: relative;
}
.vert-center {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.slides img {
    display: inline-block;
    vertical-align: middle;
}

デモをご覧ください。

于 2014-02-06T08:23:21.850 に答える