How to display picture from center, small frame bigger picture - html

Question

We have a long frame(about 3.5:1 width to height) in the page.
Most of the photos showing are 4:3, bigger and improper aspect rate to the frame.
The long frame is really wanted by the costumer, not to plan to change the frame size so far.
Currently the way it displays is "width resize to the frame width, then fill from the top of the photo to bottom of the frame".
in this way almost half of the photo was cut from the down below, and it looks really bad.
I know it's almost impossible to fit both width and height without ruin the photo.
So my plan is try to display part of the photo from the center.
How should i write this CSS?
Note: the "frame" here is a "div"

Answer 1

One option if you want to use img elements is use position and transform to center the img on the frame while keep the proportion with padding like this:
.framed {
position: relative;
width: 100%;
/*Proportion 3.5:1 with the padding*/
padding-top: 28.5%;
overflow:hidden;
}
.framed img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<h5>Original Image</h5>
<img src="http://placekitten.com/200" />
<h5>Framed Image</h5>
<div class="framed">
<img src="http://placekitten.com/200" />
</div>

Answer 2

Personally, I'd use background-image and background-position. On your frame, you could apply the following CSS:
#myFrame {
background-image: url('/path/to/image.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover; scales the background image proportionally to take up 100% of the frame.
background-position: center; will center the background image, just as you've outlined in your desired example.
background-repeat: no-repeat; is just to stop the background from repeating, which is default behavior.
Of course, change the /path/to/image.png to your relative image path.
Here is an example of this behavior.