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 ?

Lowermost

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

Cassycast

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/.

Constitutionality

Ok but if the images are 30 then each 4 has to be in different div ? – Lowermost

@MarianPetrov - yes, is there a question here? It's not unusual for each row in a display to be it's own div. – Constitutionality

Hmm this is new thanks :) but how to align all images to the top of div if they have different height ? – Lowermost

@MarianPetrov - I added a demo of both the top alignment and the overflow setting to the end of my answer. – Constitutionality