Question

I have the following:

CSS:

.photo {
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100px;
  height: 100px;
}

HAML

.photo
  %img{:src => my_url}

See the jsFiddle here. The image I used to demonstrate is 150px by 80px.

I need to display the image inside the .photo div and crop off any excess. The image needs to be centered vertically and horizontally. However, display:table-cell causes the .photo div to ignore my width and height settings. How can I get around this?

Answer 1

table-cell is not the only solution to vertical-align.

.photo {
    overflow: hidden;
    background: #c0c0c0;
    display:inline-block; /* or float:left; */
    text-align: center;
    width: 100px;
    height: 100px;
    line-height:97px;
}
.photo img {
    vertical-align:middle;
    max-width:100%;
    max-height:100%;
}