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

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

您确实将其垂直居中，但图像的高度为 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') ;
}

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

Center unknow image size with overflow hidden

css

image

center