Bilder in div per overflov hidden abschneiden

Hallo zusammen,

ich habe ein kleines Problem:
Ich habe ein Div (100% Breite, 363px feste Höhe) mit einem Vimeo-Video in der Mitte und 2 Bildern links und rechts. Das Video soll immer 640x363px haben.
Bei kleineren Auflösungen sollen die Bilder links und rechts aussen per overflow hidden abgeschnitten werden, wobei sich das linke Bild rechts im div ausrichten, das rechte Bild sich links im div ausrichten soll...

Wie kriegt man es im CSS hin?
Besten Dank im Voraus
cozmo

Das ist das bisherige Test-CSS:

body {
margin: 0px;
padding: 0px;
}

#content {
margin: 0px;
padding: 0px;
height: 363px;
width: 100%;
/* [disabled]overflow: hidden; */
position: relative;
}
#links {
margin: 0px;
padding: 0px;
float: left;
height: 363px;
overflow: hidden;
position: relative;
background-color: #999;
text-align: right;
display: block;
max-width: 33%;
top: 0px;
right: 0px;
clip: rect(0px,0px,auto,auto);
}
#mitte {
padding: 0px;
float: left;
height: 363px;
width: 640px;
position: relative;
background-color: #960;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
overflow: hidden;
left: auto;
top: 0px;
right: auto;
}
#rechts {
margin: 0px;
padding: 0px;
float: left;
height: 363px;
overflow: hidden;
position: relative;
text-align: left;
display: block;
background-color: #090;
max-width: 33%;
}
#links img {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
top: 0px;
right: 0px;
position: relative;
text-align: right;
display: block;
}
#rechts img {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
position: relative;
left: 0px;
top: 0px;
text-align: left;
clip: rect(0px,auto,auto,0px);
}

Wo ist der Denkfehler?