javascript - 画像幅サイズでdivラッパーの高さを設定

Question

私がここでやろうとしていることをもう一度説明しようとしています。div/のimg例の周りに少し混乱があるようです。要するに、私がやろうとしているのは、正方形のままであるが、ブラウザウィンドウが調整されるとそれに応じてサイズが拡大する画像の周りにラッパーを作成することです. 正方形の内側の画像も、正方形のラッパー ( div) 内でサイズを調整してスペースを埋めます。画像はすべてほぼ同じ幅ですが、高さはさまざまです。正方形のラッパーよりも大きいものについては、上に配置して下を非表示にしたいと考えています。正方形のラッパーはウィンドウに合わせてサイズが変更されるため、これに実際のサイズを設定することはできませんが、div自動的に調整したいと考えています。

お役に立てれば。

だからここに私が思いついたものがあります。これはほとんどの場合うまくいくようです。

var divWidth = $('.photo').width();
$('.photo').height(divWidth);

$(window).resize(function () {
    var divWidth = $('.photo').width();
    $('.photo').height(divWidth);
});

追加する提案はありますか？

--- 元の説明 ----

画像付きのレスポンシブ Web ページを作成しようとしています。残念ながら、すべての画像の高さと幅の比率が同じというわけではありません。そのため、画像の現在の幅で高さを設定するラッパーを画像の周りに作成し、残りを非表示にすることを考えていました。これを行うための最良かつ最も簡単な方法をお探しですか?

これにより、ブラウザの幅に合わせて拡張される項目の 2 列のリストが作成されます。しかし残念なことに、画像のサイズの関係で、一部のアイテムは他のアイテムよりも背が高くなっています。そして、画像を正方形のボックスの幅と同じ幅にして、適合性を確保したいと考えています。しかし、画像の高さをサイズ変更したくありません。幅を 100% 塗りつぶし、下にオーバーフローさせます。

CSS:

.listing ul {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
}

.listPeople li {
    list-style: none;
    float: left;
    position: relative;
    display: block;
    width: 48.93617020799999%;
    height: auto;
    background: #FFF;
    border: 1px solid #D0D5D8;
    padding: 12px;
    margin: 0 15px 15px 0;
}

    .listPeople li .user .photo {
        position: relative;
        display: block;
        background: #FFF;
        box-shadow: 0 1px 2px rgba(0,0,0,0.09);
        border: 1px solid #DDD;
        padding: 8px;
        margin: 0;
    }

.listing li .user .photo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    padding: 0;
    margin: 0;
}

.listing li .content {
    float: left;
    position: relative;
    display: block;
    width: 74.468085099%;
    height: 100%;
    padding: 0;
    margin: 0;
}

HTML:

<div class="listing">
    <ul>
        <li>
            <div class="user">
                <div class="photo">
                    <a href="#"><img src="URL" /></a>
                </div>
                <a class="button">Follow</a>
            </div>
            <div class="content">
                -- normal html formatting --
            </div>
        </li>
    </ul>
</div>

score 1 · Accepted Answer

コンテナの幅を設定してstyle="max-width:100%"から、imgタグの属性を使用します。

<p><img src="http://whiterootmedia.com/images/css_rule.jpg" alt="css rule" style="max-width:100%" /></p>

以下に例を示します: http://www.whiterootmedia.com/database/dusty_arlia/what_are_css_selectors.html

score 0 · Accepted Answer

この投稿では、HTML と CSS のみを使用して、div を常に正方形に保つ方法について説明します。しかし、それposition:absoluteを達成するためにいくつかを使用します。ただし、ラッパーを追加するだけの問題であるposition:relative;ため、ウィンドウの位置を使用するのではなく、上/下/左/右がラッパーを尊重します。

画像が正方形よりも大きい場合に画像をトリミングするには、画像overflow:hidden;を追加しながら正方形の div を追加するだけmax-width:100%;で、トリミングされずに (幅で) 独自のアスペクト比を常に保持します。

score 0 · Accepted Answer

imgをdivでラップします。
div overflow-yスタイルプロパティをに設定しhiddenます。
画像の幅を好みに合わせて設定します。
div幅を画像幅に設定します。

アップデート

var imgs = document.getElementsByTagName('img') /* get all image elements */,
    i,
    div;

for (i = 0; i < imgs.length; i++) {
    div = document.createElement('div');
    // set the div overflow-y style property to hidden
    div.style.overflowY = 'hidden';
    // wrap the image in the div
    div.appendChild(imgs[i]);
    imgs[i].parentElement.replaceChild(div, imgs[i]);
    // set the image width to your liking
    imgs[i].style.width = YOUR_WIDTH + 'px'; // replace YOUR_WIDTH with whatever you want
    // set the div width to image width
    div.style.width = imgs[i].style.width;
}

注1：テストはしていませんが、動作するはずです

注 2 : Divはデフォルトでブロックとして表示されます。インラインで表示する場合は、スパンの使用を検討するか、divdisplayスタイルをに設定してください。inline

javascript - 画像幅サイズでdivラッパーの高さを設定

3 に答える 3

Related

Reference