如何裁剪图像？

Question

我的项目

这是我第一次制作网站，我在网上搜索过并观看了视频，但它不适合我。

我试图让这张图片看起来不错并经过裁剪，但我不知道如何做。实在是太长了，请大家多多指教。我只需要在底部剪掉一点即可。它必须是水平的并且适合整个页面。

我不知道我是否应该使用高度？我尝试了一下，它没有按照我想要的方式裁剪图像。

Answer 1

您可以尝试 CSS 中的

object-fit

属性，来控制图像在容器元素内的缩放和填充方式。要从底部裁剪一点，您可以将其与具有特定高度的容器结合起来。以下是如何执行此操作的示例：

1. HTML：

<div class="image-container">
    <img src="path/to/your/image.jpg" alt="Image Description">
</div>

2. CSS：

    .image-container {
        width: 100%;
        height: 300px; /* adjust as needed to crop the image */
        overflow: hidden;
    }
    
    .image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }