is it possible to split 2 images vertically and when resizing the browser, it wont overlap but stay vertically centered?

can the left image stay fixed so the right side of it won't cut off(overlap)

this is what i have now, but when resizing the browser smaller, it pushes the left image underneath the right. rather have the images cut off on the outer sides and never overlap each other in the middle, make sense?

#wrapper {
 width:1680px;
 max-width:1680px;
 height:500px;
 margin: 0 auto;
}
#left-image {
 width: 50%;
 position:absolute;
 left: auto;
 height:500px;
}
#right-image {
 width: 50%;
 position:absolute;
 right: 0px;
 height:500px;
}