Benny Ae Benny Ae - 19 days ago 5
CSS Question

How to display picture from center, small frame bigger picture

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"

enter image description here

Answer

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>

Comments