4

私はレスポンシブレイアウトに取り組んでいます。例については、このフィドルまたは以下のコードを参照してください: http://jsfiddle.net/jasonpalter/GBygZ/

画像には左余白があります。これは、コンテナの幅全体に広がっていない場合に必要です。ただし、イメージがコンテナーの幅全体に及ぶ場合は、左マージンを削除する必要があります。ブレークポイントを使用するだけでこれを実現できますが、画像自体は動的であり、その次元がどうなるかはわかりません。

画像がコンテナの全幅にまたがる場合に画像のパディングが消えるようにする自動方法 (CSS、またはあまり好ましくない JavaScript) はありますか?

HTML

<div class="pod">
    <div class="img-right">
        <img src="http://placehold.it/460x220" width="460" height="220" />
    </div>
    <h3>Lorem Ipsum</h3>
    <div>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
</div>

CSS

.pod {
    overflow: hidden;
    padding: 5px;
    border: 1px dotted #ccc;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

.img-right {
    float: right;
}

.img-right img {
    box-sizing: border-box;
    padding: 0 0 0 5px;
    max-width: 100%;
    height: auto;
}
4

2 に答える 2

0

JavaScript でこれを行うには、Imageオブジェクトを作成し、そのsrc属性を画像ソースに設定してから、画像の寸法を取得する関数を画像オブジェクトのonload属性に渡す必要があります。その情報を使用して、ウィンドウのイベントに関数をバインドしてresize、画像がコンテナーの幅全体に及ぶときに画像のパディングを取り除き、逆の場合に元に戻すことができます。

img:not(:resized)残念ながら CSS でこれを行う方法はありませんが、セレクターを書くだけでよいのです!

于 2013-07-26T20:12:02.200 に答える
0

私の経験では、CSS だけで画像の幅を知らなければ、これは不可能です。jQuery ソリューションは非常に単純です

デモhttp://jsfiddle.net/kevinPHPkevin/GBygZ/5/

var windowWidth = $(window).width();
if ($('#image').width() < windowWidth) {
    $('#image').css('padding-left', '10px')
}

これをフィドルでテストすると、フィドルに割り当てられた編集可能な列の幅ではなく、ウィンドウがブラウザー ウィンドウの幅であるため、機能しません。

于 2013-07-26T20:33:15.657 に答える