html - 如何在div之外截断元素

Question

我有以下布局：http: //jsfiddle.net/7C2R8/

蓝色容器是我的页面。

我用负边距定位我的图像：

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

图像是我想要的位置，整个事情在大屏幕上按照我想要的方式工作。

当视口较小时，问题就来了。例如，如果视口是容器的大小（在我的示例中为 500 像素宽），则 x 轴上会出现一个滚动条以查看图像。这是我不想要的。我希望在没有足够空间时截断我的图像。容器是唯一应该滚动的东西。

当视口足够大时，图像应该完全可见。

我如何实现这一目标？

谢谢！

Answer 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根据窗口的宽度设置属性。让我知道这是否是您的想法。

Answer 2

我设法通过在容器周围添加一个包装器来做到这一点

width:100%;
overflow-x:hidden;

现在这可能不适用于所有情况，但在这种情况下，设计是响应式的，x 轴上不应该有任何滚动，所以它工作正常。

这里的工作解决方案：http: //jsfiddle.net/Z3m7m/1/

Answer 3

我认为您正在寻找溢出：隐藏；

.container {
    overflow:hidden;
}