1

私は次のレイアウトを持っています：http：//jsfiddle.net/7C2R8/

青いコンテナは私のページです。

画像を負のマージンで配置します：

.image-wrapper {
    float:right;
    margin-top:-250px;
    margin-right:-100px;
}

画像は私が望む場所にあり、すべてが大画面で私が望むように機能します。

ビューポートが小さい場合に問題が発生します。たとえば、ビューポートがコンテナのサイズ（私の例では幅500px）の場合、画像を表示するためにx軸にスクロールバーが表示されます。これは私が望まないことです。十分なスペースがない場合は、画像を切り捨てたいと思います。スクロールする必要があるのはコンテナだけです。

レイアウトの問題

ビューポートが十分に大きい場合、画像は完全に表示されます。

どうすればこれを達成できますか？

ありがとう！

4

3 に答える 3

1

クラスに追加overflow:hidden;します。.container

更新：ページの読み込み時とサイズ変更の場合は幅を監視する必要があります。このjsfiddleを見てください。

$('document').ready(function () { 

    MonitorViewportResize();    
    DoImageOverflow();
});

function DoImageOverflow() {

    if ($(window).width() > 500) {
        $('.container').css('overflow','visible');
    } else {
        $('.container').css('overflow','hidden');
    }
}

function MonitorViewportResize() {

    $(window).resize(function() {
        DoImageOverflow();
    });
}

基本的にoverflowは、ウィンドウの幅に基づいて属性を設定します。これがあなたが考えていたものであるかどうか私に知らせてください。

于 2013-01-25T02:04:01.520 に答える
1

私はそれをすることができたコンテナの周りにラッパーを追加することによってそれを行うことができました

width:100%;
overflow-x:hidden;

これはすべての状況で機能するとは限りませんが、この場合、デザインはレスポンシブであり、x軸にスクロールがないため、正常に機能します。

ここでの実用的なソリューション：http：//jsfiddle.net/Z3m7m/1/

于 2013-02-01T03:47:47.513 に答える
-1

私はあなたがオーバーフローを探していると思います：隠された;

.container {
    overflow:hidden;
}
于 2013-01-25T02:02:13.697 に答える