隐藏溢出的中心未知图像大小答案

【问题标题】：Center unknow image size with overflow hidden隐藏溢出的中心未知图像大小
【发布时间】：2015-11-10 17:30:30
【问题描述】：

我该怎么做

将图像垂直居中（裁剪顶部和底部）
使图像尺寸具有宽度：100%
它的父级隐藏了溢出？

我尝试过的一些解决方案是 Align image in center and middle within div 和其他人一样。

html

<div> 
    <a href="#"><img src=".."></a>
</div>

css

div {
  height:60px;
  width:200px;
  position: relative;
  display: block;
  overflow:hidden;
}

img {
  vertical-align:middle;
  width:100%;
}

这里有一个代码笔 http://codepen.io/anon/pen/oXRoxp

谢谢！

【问题讨论】：

标签： css image center

【解决方案1】：

您确实将其垂直居中，但图像的高度为 150 像素，而包含 <div> 的高度仅为 60 像素。使<div> 大于 150px，您会看到它正确对齐。

编辑

如果您有意尝试在 <div> 内剪辑图像，请移除 <img> 元素并使用 CSS 将其设置为背景。

div {
  height:60px;
  width:200px;
  vertical-align:middle;
  display:table-cell;
  overflow:hidden;
  background: no-repeat center url('http://www.w3schools.com/css/klematis4_big.jpg') ;
}

【讨论】：