-1

在这个问题之后，我想知道是否有任何新的解决方案可以<img>在不扭曲它的情况下裁剪 css，同时保持其纵横比（不添加包装器）。

例如：假设我们有一个<img src="#">. 是否可以在到达时裁剪此图像min-height:200px;，而不水平拉伸它，同时保持它width:100%;？

这可以在没有包装器和javascript的情况下在纯css中完成吗？

  • 我在另一个问题中读到，唯一的选择是负边距，但该解决方案只是暗示而不是实际解释。
  • 此外，另一种可能的解决方案是使用clip，但这会将元素从文档流中取出，这意味着任何使用的解决方案clip还必须将元素重新定位到其原始位置（同时将其他内容推开）。
  • 链接问题中的另一个答案暗示使用生成的内容，但据我所知，我不知道这将如何工作，因为生成的内容无法插入 html（仅文本）。
4

1 回答 1

0

我认为唯一（也是最简单）的方法是将图像作为 div 或 img 的背景。

假设我们有这张图片，我们想裁剪右边那个人的脸。

我们可以这样做：

HTML： 

<div class="img"></div>  
<!-- OR -->
<img class="img"/>

CSS： 

.img{
    width:250px;
    height:250px;
    background-image:url(http://casafamilyday.org/familyday/files/media/Family%20of%204%20outside_new%20homepage%20photo.jpg);
    background-position:300px 0;
}

FIDDLE 在这里
，您可以使用 html 上的一个元素轻松裁剪图像，并且通过将background-image属性替换为 javascript 很容易以动态方式导入图像。

于 2013-04-11T13:48:55.467 回答