根据背景图像容器裁剪图像顶部

Question

我有一个带有背景图像的容器。此容器的高度可变，具体取决于容器中的内容。随着容器的变小，我想逐渐切掉背景图像的底部，同时仍将其保留在同一位置。

我尝试过背景尺寸和背景位置，但是我无法实现。有什么建议吗？

基本上我想这样做：http://jsfiddle.net/tdgbu6kv/2/

.one {
  height: 500px;
}

.two {
  height: 100px;
}

.image {
  border: 1px solid red;
  background-position: right bottom;
  background-size: 50%;
  background-repeat: no-repeat;
  background-image: url(https://source.unsplash.com/random/800x600)
}

但我希望它不切掉图像的顶部