css - 中心未知图像大小并 overflow hidden

Question

我该怎么做

• 垂直居中图像(裁剪顶部和底部)

• 图片大小为width: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 并且你包含 <div>只有 60px 高。制作 <div>大于 150 像素，您会看到它已正确对齐。

编辑

如果您有意尝试在 <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') ;
}