css - 仅使用 CSS，裁剪 .img 保持外观不失真

Question

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

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

所以我想把图像变成 590 到 200。如果我使用......

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

...然后图像完全按照我想要的方式位于 div 内。但是，照片本身被压扁并变形为 590 x 200。如何确保图像仅在该尺寸范围内裁剪并且没有变形？

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

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

Answer 1

你不能简单地通过编辑 css 来做到这一点。您需要将图像作为背景图像放入 HTML

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

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

CSS

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

在这里演示

在演示中，我将背景位置设置为中心。

Answer 2

尝试这个：

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

警告：自动宽度在 IE7 中不起作用（我不确定 IE8）。您可能必须使用 js 解决方案来实现向后兼容性。

Answer 3

你可以把这张图片放到div background-image 样式中，然后使用CSS3 style - background-size:cover