1

ウィンドウの 100% の画像があります。caption内部には、ヘッダーとテキストを表示する絶対配置の div ( classを使用) があります。このキャプションはmin-width36% です。完全に応答する場合、私のウェブサイト。

メディア クエリを使用して、タブレットとモバイルでキャプションの位置を変更しています。ただし、キャプション内のテキストitemが大きすぎる場合があります。キャプションの高さが画像よりも大きい場合があります。

次のコードを使用して、javascript を使用してこれを修正していますが、大きなバグがあるように感じます (ユーザーがブラウザーのサイズを変更すると機能しません)。

window.onload = function(){
  setWidth();
};

var count = 0;
function setWidth() {
    $('.item').each(function() {
        if ( $(this).find('.caption')[0].scrollHeight >  $(this).height() && count <= 100) {
            $(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
            count++;
            setWidth();
        }
    });
}

css だけを使用して同じ効果を達成する方法はありますか。max-height上がcaption100%、上min-widthが 36% で、キャプションの高さが変わるとそれに応じて幅が変わります。

4

1 に答える 1

0

例のマークアップなしで CSS が実行可能かどうかを確認するのは困難です。resizeJavaScript に関しては、関数をイベントにアタッチするwindow.onresizeと、ウィンドウのサイズが変更されるたびに呼び出されます。

JSFiddle の例を参照してください

window.onresize = updateDimensions;

function updateDimensions(e) {
    document.getElementById('width').innerHTML = window.innerWidth;
    document.getElementById('height').innerHTML = window.innerHeight;
}

updateDimensions();
于 2013-03-03T02:54:40.940 に答える