如何在 HTML 和 CSS 中裁剪调整大小的图像？

Question

我正在尝试调整 CSS 和 HTML 中的图像大小-这是我当前的 CSS 代码，我用来将图像调整到所需的大小：

.resize-image {
    border:1px solid #021a40;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 1442px;
}

使用那个 CSS，我如何裁剪任何图像，以便只显示图像的前 250 像素或 20%，等等？这就是我的意思：

带箭头的区域是我要删除的部分-我只想保留图片的顶部四分之一。我如何在[=27=中完成此操作] 或 HTML?

编辑：这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<style>
.resize-image {
    border:1px solid #021a40;
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 1442px;
    overflow: hidden;
}
</style>
</head>
<body>

<div class= "img-container">
    <img class = "resize-image" src="https://i.imgur.com/DJPXuPZ.png">
</div>
</body>
</html>

Answer 1

您必须在父 div 上使用 height 和 overflow: hidden 希望！有效

.img-container{
    height: 300px;
    overflow: hidden;
}
.resize-image {
    border:1px solid #021a40;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class= "img-container">
    <img class = "resize-image" src="https://i.imgur.com/DJPXuPZ.png">
</div>
</body>
</html>

Answer 2

您需要将 overflow 添加到父级并将其 height 设置为您希望 crop.

.resize-image {
  border: 1px solid #021a40;
  display: block;
  max-width: 100%;
  max-height: 1442px;
}

.img-container {
  width: auto;
  height: 250px;
  overflow: hidden;
}

<div class="img-container">
  <img class="resize-image" src="https://i.imgur.com/DJPXuPZ.png">
</div>

如何在 HTML 和 CSS 中裁剪调整大小的图像？

How to crop a resized image in HTML and CSS?

html

css

image-processing