仅使用 CSS，裁剪 .image 保持方面不失真答案

【问题标题】：Using just CSS, crop .img keeping aspect without distortion仅使用 CSS，裁剪 .image 保持方面不失真
【发布时间】：2012-11-27 10:20:58
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

在没有容器的情况下最接近的是使用负边距顶部和边距右边
可以把图片设置为背景吗？如果是这样，那么我可能有一个解决方案。
鉴于您的限制，我认为您唯一的镜头是clip property。不幸的是，元素必须绝对定位。
是的，剪辑看起来不错，但我无法使图像绝对定位。不过还是谢谢。
我假设您也不能添加 javascript（不修改 DOM）？如果您可以将图像变成带背景的 div（通过 :after{:content），那么有 CSS 属性可以做到这一点。除了从 javascript 注入 CSS 之外，我仍然不知道如何将图像 URL 提供给背景。

标签： css image crop aspect-ratio

【解决方案1】：

你不能仅仅通过编辑 css 来做到这一点。您需要将图像作为背景图像放在 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

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

【讨论】：

也不可能添加包装器。
"你不能仅仅通过编辑 css 来做到这一点" 不幸的是我认为你是对的。我无法访问 HTML 来创建包装器或将图像更改为背景图像。我会继续玩，但我想我会问，以防有人有魔法......
是的。在不编辑 HTML 的情况下，所有其他解决方案都会使图像失真！

【解决方案2】：

试试这个：

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

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

【讨论】：

那么图片太窄了。

【解决方案3】：

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

【讨论】：

很遗憾，我无法编辑 div 样式或 html。我只能访问 .img 的 CSS
@user1325308 这里有一个明确的想法：尝试使用 background-image 属性。他们有很多潜力。