CSS在绝对块中剪切图像

I'm trying to cut image with absolute block. I want to hide right image with (red line) left column height.

我正试图用绝对块切割图像。我想隐藏右图像（红线）左列高度。

的jsfiddle

.relative {
    position: relative;
}

.box {
    position: relative;  
}

.border {
    border: 1px solid red;
}

.inside {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;      
}

<div class="container">
    <div class="row border">
        <div class="col-xs-4">
            <img src="http://lorempixel.com/300/500/nature/" class="img-responsive"/>
        </div>
        <div class="col-xs-8 relative">
            <div class="box">
                <div class="inside">
                    <img src="http://lorempixel.com/800/1000/nature/" class="img-responsive"/>
                </div>
            </div>
        </div>
    </div>    
</div>

2 个解决方案

#1

Do you mean something like this: https://jsfiddle.net/82ov0e3t/28/

你的意思是这样的：https：//jsfiddle.net/82ov0e3t/28/

.border{ bordeR: 1px solid red; overflow: hidden;}

#2

To cut the right image in the height of the left image, use this js in window load and window resize.

要在左图像的高度剪切右图像，请在窗口加载和窗口调整大小时使用此js。

$('.inside').css({
  'height': $('.border').outerHeight(),
  'overflow': 'hidden'
});

https://jsfiddle.net/afelixj/82ov0e3t/29/

#1