0

私がやろうとしていることは次のとおりです。

  1. 隠し画像のリストがあります。
  2. divのhtmlを置き換えて画像を含めるJquery onclickでボタンをアクティブにしています
  3. このボタンは循環ボタンとして機能し、画像の大きなリストを取得します。

私の問題は、画像が親 div のサイズに合わせられないことです。.horizo​​ntal クラスと .vertical クラスを与えても、何かアイデアはありますか?

リストで他のことを行うため、div内の画像の非表示リストの形式を維持したいと思います。私は当初、画像に2つのクラスを用意することでうまくいくと思っていましたが、完成した今、アイデア全体に問題があることに気付きました!

http://jsfiddle.net/alexnode/ttQHt/

HTML
    <div id="artdiv2">
        <div id="artslide1nextbutton">></div>
        <div id="artslide1"></div>
    </div>
    <div class="hidden">
    <div id="1slide1">
        <img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg"  alt="Rezando a los antiguos Dioses - Praying to the old Gods">
    </div>
    <div id="1slide2">
        <img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg"  alt="Drain">
    </div>
        </div>

Jquery
//i get everything called 1slide like that. 
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the image 
$("#artslide1nextbutton").on(
    "click", function () {
    $("#artslide1").html(artslides.eq(idxs1).html());
    idxs1 = idxs1 == 1? 0 : idxs1 + 1;
});

CSS
.hidden{display:none;}
#artdiv2{ position:absolute;  top:8%; left: 20%; height:70%; width:100%; background:DimGray;}
#artslide1nextbutton{position:fixed;  top:0px; left: 0px; height:auto; width:10%; background:DarkRed;pointer:cursor;}
.horizontal {position:relative; width:100%; height:auto;}
.vertical {position:relative; height:100%; width:auto;}
4

3 に答える 3

1

JQuery 変数.height()を使用し、.width()

于 2013-06-29T17:29:42.080 に答える
1

編集:質問に近づくように回答が更新されました。:

text-align:center を使用して、幅の最小値と最大値と中央の画像を再生できます。

デモ http://jsfiddle.net/ttQHt/2/

    #artslide1 {
        width:100%;
        overflow:hidden;
        height:100%;
        text-align:center;
    }
#artslide1 img {
    min-height:100%;
    max-width:100%;

}

画像で遊ぶための他のオプション

これは、line-height を設定できる場合に何が起こるかのアイデアです。http://codepen.io/gcyrillus/pen/BdtEjおよび min-width/min-height http://codepen.io/anon/pen/kfIbpの追加

于 2013-06-29T17:23:09.047 に答える
0

私はモバイルなので、自分でこれを試すことはできませんが、幅と高さの属性を画像要素に直接配置し、ボタンを使用して画像ソースを変更するのはどうですか? これにより、すべての画像の幅と高さが同じになります。

于 2013-06-29T17:22:51.923 に答える