Question

我有一张放在div里面的图片。 div宽度为600，高度可变。

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

所以我想将图像制作成590乘200.如果我使用...

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

...然后图像完全按照我想要的方式位于div内部。然而，照片本身被压扁并扭曲到590乘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>

并在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

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

Answer 2

您可以将此图片放入div background-image样式，然后使用CSS3样式 - background-size：cover

Answer 3

试试这个：

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

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

仅使用CSS，裁剪.image保持方面没有失真

3 个答案: