Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Обрезка img css

Dlazder Мудрец (12734), закрыт 7 месяцев назад
Есть ли способ обрезать картинку в теге img? Чтобы я указал размеры в css, и лишнее отрезалось. Я знаю что такое можно будет сделать с помощью overflow hidden, меня интересует именно этот вариант
Лучший ответ
Zorro Man Гуру (2923) 1 год назад
Есть очень удобный и функциональный вариант с clip-path, но тебя почему-то интересует другой менее функциональный вариант.
DlazderМудрец (12734) 1 год назад
Для использования clip-path нужны точные значения пикселей и нужно обращаться к стилям.
DlazderМудрец (12734) 1 год назад
А если мне к примеру нужно вырезать кусок из центра, или сделать так чтобы изображения были вписаны в "css контейнер", при этом посередине. Даже без доп контейнера в html. Или я ошибаюсь? просто не использовал clip-path никогда, видел только некоторые примеры его использования...
Zorro ManГуру (2923) 1 год назад
Поковыряйся в этом онлайн-сервисе, чтобы почувствовать прелесть clip-path.
Остальные ответы
Professional Professional Мудрец (15768) 1 год назад
Да, вы можете использовать CSS для обрезки изображений, используя свойство `overflow: hidden` вместе с установкой определенных размеров для родительского контейнера. Вот пример кода:

```css
.container {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}

.container img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
```
HTML:

```html
<div class="container">
<img src="your_image.jpg" alt="Your image">
</div>
```

В этом примере изображение будет обрезано до размеров контейнера (200x200 пикселей). Помимо этого, с помощью свойства `clip` вы можете точно указать область изображения, которую хотите показать.

Важно заметить, что `clip` больше не рекомендуется к использованию в новых проектах, и вместо него предлагается использовать `clip-path`, но обратите внимание на то, что поддержка `clip-path` в некоторых браузерах может быть неполной.

Также можно использовать `object-fit: cover;` для изображений, чтобы они подстраивались под размер своего контейнера, сохраняя при этом свои пропорции.
DlazderМудрец (12734) 1 год назад
object-fit: cover; Это все что было нужно, ну и зачем же столько писанины... GPT как всегда...
Похожие вопросы