web-dev-qa-db-fra.com

Pouvez-vous utiliser display: table-cell et avoir une largeur / hauteur fixe?

J'ai ce qui suit:

CSS: 

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

[~ # ~] haml [~ # ~] 

.photo
  %img{:src => my_url}

Voir le jsFiddle ici . L'image que j'ai utilisée pour démontrer est de 150 pixels sur 80 pixels.

J'ai besoin d'afficher l'image à l'intérieur du .photo diviser et rogner tout excès. L'image doit être centrée verticalement et horizontalement. Cependant, display:table-cell provoque le .photo div pour ignorer mes paramètres de largeur et de hauteur. Comment contourner cela?

htmlcsscss-tables
20
CodeWombat

table-cell n'est pas la seule solution d'alignement vertical.

.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%;
}
20
MatTheCat

Vous pouvez utiliser display: table-cell mais le parent doit avoir display: table-row et le parent de la ligne doit avoir display: table;

5
general666

Si vous mettez un div intérieur, cela semble fonctionner. Vous ne savez pas pourquoi vous avez besoin de display:table-cell en premier lieu?

http://jsfiddle.net/locrizak/5tawU/

Aussi, avez-vous envisagé de simplement mettre une largeur sur l'image? Cela entraînera le redimensionnement de la hauteur de l'image en conséquence.

1
locrizak