中心未知图像大小，隐藏溢出

Question

我如何

• 垂直居中图像（裁剪顶部和底部）
• 使图像大小具有宽度：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

谢谢！

Answer 1

你确实让它垂直居中但图像的高度为150px，而你的*只有60px高。使<div>大于150px，您将看到它正确对齐。

修改

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

<img>