html – 你可以使用display：table-cell并且具有固定的宽度/高度

发布时间：2020-12-14 22:25:08 所属栏目：资源来源：网络整理

导读：我有以下几点： CSS： .photo { overflow: hidden; display: table-cell; vertical-align: middle; text-align: center; width: 100px; height: 100px;} HAML .photo %img{:src = my_url} 看到j??sFiddle here.我用来演示的图像是150像素乘80像素。我需要在

我有以下几点：

CSS：

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

HAML

.photo
  %img{:src => my_url}

看到j??sFiddle here.我用来演示的图像是150像素乘80像素。

我需要在.photo div中显示图像，并裁剪任何多余的图像。图像需要垂直和水平居中。但是，显示：table-cell会导致.photo div忽略我的宽度和高度设置。我该怎么办？

解决方法

table-cell不是垂直对齐的唯一解决方案。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!