Question

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

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

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

Answer 1

HTML：

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

CSS：

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

Answer 2

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

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

Answer 3

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

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

Answer 4

尝试以下方法：

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

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

Answer 5

您可以将图像设置为div为100px square的背景。那很有用。特别是如果你不介意它每次只是削减底部。如果你想改变截断的位置，你可以偏移背景。

Answer 6

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

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

使用Javascript或CSS裁剪图片？

6 个答案: