使用 Javascript 或 CSS 裁剪图片？答案

【问题标题】：Crop a picture with Javascript or CSS?使用 Javascript 或 CSS 裁剪图片？
【发布时间】：2011-10-20 19:37:06
【问题描述】：

我有固定宽度的图片（即100px）但高度可变（可能是200px、130px，...但高度始终是>= 100px）。

我正在寻找可以裁剪图片底部的 CSS 或 JavaScript 代码，以便我的所有图片的大小都为 100x100。

这可以做到吗，还是我应该使用一些 PHP（或其他服务器端语言）库？

【问题讨论】：

【解决方案1】：

如果您只需要视觉上裁剪图像，您可以将其设置为所需尺寸的另一个元素的背景图像。

/* CSS */
.imageContainer {
    display: block;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

<!-- HTML -->
<div class="imageContainer" style="background-image: url('path/to/your-image.jpg')"></div>

【讨论】：

【解决方案2】：

使用图像的宽度/高度属性会缩放它，这是您不想要的。一种可能性是将每个图像放在一个 100x100 的 div 中，隐藏溢出。这里唯一的问题是，如果图像上有任何替代文本，它将被切断。

<div style="width:100px;height:100px;overflow:hidden;>
    <img src="image.jpg">
</div>

【讨论】：

【解决方案3】：

您可以将图像设置为 100 像素正方形的 div 的背景。那行得通。特别是如果你不介意它每次都把底部切掉。如果你想改变它的切断位置，你可以抵消背景。

【讨论】：

【解决方案4】：

尝试以下方法：

<div class="cropContainer">
    <img src="yourImageSrc">
</div>

<style>
    .cropContainer{
        overflow:hidden;
        width:100px;
        height:100px;
        display:block;
    }
</style>

【讨论】：

【解决方案5】：

HTML：

<div id="cutter">
  <img src="..." alt=""/>
</div>

CSS：

div#cutter {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

【讨论】：

不，它不会调整大小。它削减了！你有 div 里面的图像
使用您的代码后，我意识到有些图片的高度 widht: 100px; height: min(100px, real_size); 的操作？
你可以设置div#cutter img { min-height: 100px; }，但不是所有浏览器都支持
非常感谢！！祝你有美好的一天！

【解决方案6】：

是的，这可以使用 CSS 来完成。例如：

<div style="background-image:url('stuff.png');width:100px;height:130px;"></div>

【讨论】：