Fixed image width and height but the height to be cut

Question

I just noticed in vk.com that the images in your album have fixed width but the height is also fixed but images are cut like in the middle.And if i copy the path to the images and view only them they are not cut.

i make this photo to be more easy to understand

How this is done ?

Answer 1

Their containers have a fixed height with overflow:hidden set.

HTML:

<ul>
<li><img src="//lorempixel.com/100/100/"></li>
<li><img src="//lorempixel.com/100/200/"></li>
<li><img src="//lorempixel.com/100/300/"></li>
<li><img src="//lorempixel.com/100/400/"></li>
</ul>​

CSS:

li { float:left; height:100px; overflow:hidden; margin:10px; }

Demo: jsfiddle.net/tbedf

Answer 2

The images can be put in a container div that has a fixed height and then set the container div to overflow: hidden. This will clip any child objects that are larger than the container. The clipping is at display time only, the images themselves remain unchanged.

You can see an example of an image containing div where you can toggle the overflow settings between hidden and visible in this demo: http://jsfiddle.net/jfriend00/npzjn/.