用Javascript或CSS裁剪图片？

我有宽度恒定（即

100px

）但高度可变的图片（可以是

200px

，

130px

，…但高度总是

=100px

）

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

---

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

是的，这可以使用CSS实现。 例如：

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

HTML：

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

尝试以下方法：

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

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

cropContainer先生{
溢出：隐藏；
宽度：100px；
高度：100px；
显示：块；
}

您可以将图像设置为100像素正方形的div的背景。那就行了。特别是如果你不介意每次都把底部切下来。如果要更改背景的截止位置，可以偏移背景。

使用“图像宽度/高度”属性可以缩放背景，这是您不希望的。一种可能是将每个图像放在一个100x100的div中，隐藏溢出。这里唯一的问题是，如果图像上有任何alt文本，它将被切断

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

---

如果只需要对图像进行视觉裁剪，则可以按所需尺寸将其设置为另一个元素的背景图像

/* 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>

/*CSS*/
.imageContainer{
显示：块；
宽度：100px；
高度：100px；
溢出：隐藏；
背景重复：无重复；
背景位置：0px 0px；
}
否，它不会调整大小。它切！在使用代码后，我发现有一些图片的高度小于100，有没有办法让我达到这个高度，然后做一些类似于widt:100px的事情；高度：最小值（100px，实际尺寸）

？您可以设置

切割器img{min height:100px；}

但并非所有浏览器都支持它，非常感谢！！祝您有个美好的一天！

/* 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>