css - 仅使用 CSS，裁剪 .image 保持纵横比不失真

Question

我有一个放在 div 中的图像。 div 宽度为 600，高度可变。

我希望我的图片位于 div 的顶部。如果我将宽度设置为 590，问题是图像在设计方面太高并且在页面上看起来太占优势(因为它的比例大约为 4:3 等)。

所以我想将图像设为 590 x 200。如果我使用...

.img { 
width: 590px;
max-height: 200px;
}

...然后图像就按照我想要的方式位于 div 中。但是，照片本身被挤压并扭曲为 590 x 200。我如何确保图像恰好在该尺寸范围内裁剪并且没有失真？

我无法访问 html，因此也无法在其周围添加包装器，不幸的是...这将只需要通过编辑 CSS 类 .img 来完成。

编辑 - Andy 是对的，负边距是我能让它起作用的唯一方法。谢谢安迪。

Answer 1

你不能简单地通过编辑 css 来做到这一点。您需要将图像作为 background-image 放在 HTML 中

<div class="cover">
    <div style="background-image: url(http://img.youtube.com/vi/6WNyczNYsc0/0.jpg); " class="video-thumbnail"></div>
</div>

并在 css 中使用 background-size: cover;

CSS

​.cover {
    width: 590px;
    height: 200px;
}
.video-thumbnail {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
}

DEMO HERE

在演示中，我将 background-position 置于中心位置。