html - 如何以固定高度居中图像位置

Question

我不能很好地显示固定高度的图像，因为显示拉伸(stretch)，我想定位图像。

我想可以使用固定高度为 300 像素的大图像，但图像无法显示拉伸(stretch)。

图片链接必须放在 img 标签中，因为它来自数据库。

我在这里放了一个示例代码:

.image
{
  position:relative;
  width: 100%;
  height: 300px;
}

.image img
{
  width: 100%;
  height: 300px;
}

<div class="image">
  <img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>

谢谢

Answer 1

内嵌使用 background-image 并使用 background-size: cover; 覆盖它

.image
{
  position:relative;
  width: 100%;
  height: 300px;
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div class="image" style="background-image: url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); "></div>