Блог

Главная - Вопросы по программированию - Как обрезать изображение с измененным размером в HTML и CSS?

Как обрезать изображение с измененным размером в HTML и CSS?

#html #css #image-processing

Вопрос:

Я пытаюсь изменить размер изображения в CSS и HTML — это мой текущий CSS-код, который я использую для изменения размера изображения до нужного размера:

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

Используя этот CSS, как бы я обрезал любое изображение так, чтобы отображались только первые 250 пикселей, или 20% и т. Д. Изображения? Вот что я имею в виду:

Область со стрелкой - это та часть, которую я хочу удалить-я хочу сохранить только верхнюю четверть изображения

Область со стрелкой — это та часть, которую я хочу удалить-я хочу сохранить только верхнюю четверть изображения. Как бы я сделал это в CSS или 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>

Ответ №1:

Вам нужно добавить 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>

Ответ №2:

Вы должны использовать height и overflow: hidden на родительскую div надежду! это работает

 .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>
Метки: