6

私はこの質問で、さまざまな比率の画像を使用したレスポンシブフォトギャラリーのcss実行可能なソリューションを求めてきました。
残念ながら、cssを介してこれを行うのは複雑すぎると思うので、JavaScriptを使用してサムネイルのアスペクト比を確認し、特定のサムネイルのcssをインラインで変更するのが唯一の簡単な解決策です。スクリプトはすべてのサムネイル
の比率を確認する必要があります。height:width比率が0.6666666666666667（2：3）よりも低い場合は、cssを介して設定しheight:100%; max-width:none;て実際のルールをオーバーライドします。簡単であれば、クラスを追加することもできます。

これはjavascriptを介してどのように行うことができますか？（ライブラリは他のプラグイン用にすでに存在するため、jqueryも使用できます）。

グリッドの構造は次のようになります。

<ul id="gallery" class="gallery-grid">
  <li class="grid-block">
    <div class="block-wrap">
        <div class="link-wrap">
            <a href="<?php echo $photo->sourceImageFilePath; ?>" class="block-link" target="_blank" >
                <img class="block-thumb" src="<?php echo $photo->thumbImageFilePath; ?>"/>              
            </a>
        </div>  
    </div>
  </li>
</ul>

もちろん、私の前の質問に対する実行可能なcssの答えを見つけることができれば、さらに大歓迎です！ありがとう！

4

2 に答える 2

12 
var ratio = $img.height() / $img.width();
if ( ratio < (2/3) ) { $img.css({ height: '100%', maxWidth: 'none' }) }
于 2012-10-28T23:15:47.317 に答える
7

すべてのサムネイルを照会して計算したいだけかもしれません。

$('img').each(function(_, img) {
    var $this = $(this);

    if( $this.height() / $this.width() < 0.6666666666666667 ) {
        $this.css({
            height: '100%',
            maxWidth: 'none'
        });
    }
});
于 2012-10-28T23:15:23.667 に答える