如何在 HTML 和 CSS 中裁剪调整大小的图像？
[英]How to crop a resized image in HTML and CSS?
问题描述
I am trying to resize an image in CSS and HTML- this is my current CSS code I use to resize an image to its desired size:
我正在尝试在 CSS 和 HTML 中调整图像大小 - 这是我当前用于将图像调整为所需大小的 CSS 代码：
.resize-image {
border:1px solid #021a40;
display: block;
width: auto;
max-width: 100%;
max-height: 1442px;
}
Using that CSS, how would I crop any image so that only the first 250 px, or 20%, etc. of the image shows up?使用该 CSS，我将如何裁剪任何图像，以便仅显示图像的前 250 像素或 20% 等？ Here's what I mean:这就是我的意思：
The area with the arrow is the part I want to remove- I only want to keep the top quarter of the picture.带箭头的区域是我要删除的部分 - 我只想保留图片的前四分之一。 How would I accomplish this in CSS or HTML?我将如何在 CSS 或 HTML 中完成此操作？
EDIT: This is my 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>
2 个解决方案
解决方案1
0 2021-07-23 04:13:11
You have to use height and overflow: hidden on parent div Hope!您必须使用height和overflow: hidden在父div希望上！ it works有用
.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>
解决方案2
0 已采纳 2021-07-23 04:18:15
You need to add the overflow to the parent and set its height to the amount you wish to crop .您需要将overflow添加到父项并将其height设置为您希望裁剪的数量。
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.