Центрирование картинки в div, которая вылазит за границы div

@Tnoktkm · Регистрация: 17.12.2017

Студворк — интернет-сервис помощи студентам

Проблема: центрирование картинки в div, которая вылазит за границы div`а.
Что можете посоветовать, у меня не получается.
Картинки:
1 - Как есть по умолчанию.
2 - Как должно быть.
3 - Как получилось.

Заранее спасибо )

@AlexZaw · 07.04.2018, 12:35

Для блока в котором картинка задайте overflow:hidden;

@Tnoktkm · 07.04.2018, 12:50 **[ТС]**

Нет, на 2 картинке это уже написано, на 3 это visible.

Qwerty_Wasd · 07.04.2018, 14:59

Tnoktkm, товарищ AlexZaw прав по поводу overflow:hidden;, ведь просто центрировать картинку мало - если размер картинки больше блока, она просто вылезет краями за его пределы. Поэтому дополняя ответ AlexZaw - песочница

HTML5
1
<div class="block"><img src="https://dummyimage.com/600x400/587eb8/000000.png" alt=""/></div>

CSS
1
2
.block{position:relative;height:400px;width:400px;border:2px solid;overflow:hidden}
img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

@Freeze_Breeze · 07.04.2018, 14:59

Tnoktkm, ну а код где?

Qwerty_Wasd · 07.04.2018, 15:04

Не по теме:

Freeze_Breeze, шутки про "тыжпрограммист" не слышали никогда? В это понятие входит экстрасенсорика. :D

@Freeze_Breeze · 07.04.2018, 15:10

Не по теме:

Qwerty_Wasd, :D :D :D

@Tnoktkm · 07.04.2018, 15:14 **[ТС]**

Qwerty_Wasd, спасибо помогло.
Можно объяснить зачем тут - transform:translate(-50%,-50%);

Qwerty_Wasd · 07.04.2018, 15:19

Tnoktkm,для центровки - CSS-хак такой.

Добавлено через 1 минуту
А вообще на будущее... щас найду.. секунду

Добавлено через 51 секунду
Это раз - https://habrahabr.ru/company/n... og/277433/

Добавлено через 40 секунд
Это два- https://frontender.info/center... ete-guide/

@Tnoktkm · 07.04.2018, 15:23 **[ТС]**

Qwerty_Wasd, спасибо, читаю...

Qwerty_Wasd · 07.04.2018, 15:26

Tnoktkm, не за что, удачи

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@Tnoktkm 1 / 1 / 3 Регистрация: 17.12.2017 Сообщений: 21

	Центрирование картинки в div, которая вылазит за границы div 07.04.2018, 12:24. Показов 1918. Ответов 10 Метки нет (Все метки) Проблема: центрирование картинки в div, которая вылазит за границы div`а. Что можете посоветовать, у меня не получается. Картинки: 1 - Как есть по умолчанию. 2 - Как должно быть. 3 - Как получилось. Заранее спасибо ) Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	07.04.2018, 12:35
	Для блока в котором картинка задайте `overflow:hidden;` 0

@Tnoktkm 1 / 1 / 3 Регистрация: 17.12.2017 Сообщений: 21
	07.04.2018, 12:50 [ТС]
	Нет, на 2 картинке это уже написано, на 3 это visible. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	07.04.2018, 14:59
	Tnoktkm, ну а код где? 0

Qwerty_Wasd
	07.04.2018, 15:04
	Не по теме: Freeze_Breeze, шутки про "тыжпрограммист" не слышали никогда? В это понятие входит экстрасенсорика. :D 0

@Freeze_Breeze
	07.04.2018, 15:10
	Не по теме: Qwerty_Wasd, :D :D :D 0

@Tnoktkm 1 / 1 / 3 Регистрация: 17.12.2017 Сообщений: 21
	07.04.2018, 15:14 [ТС]
	Qwerty_Wasd, спасибо помогло. Можно объяснить зачем тут - transform:translate(-50%,-50%); Миниатюры 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.04.2018, 15:19
	Tnoktkm,для центровки - CSS-хак такой. Добавлено через 1 минуту А вообще на будущее... щас найду.. секунду Добавлено через 51 секунду Это раз - https://habrahabr.ru/company/n... og/277433/ Добавлено через 40 секунд Это два- https://frontender.info/center... ete-guide/ 2

@Tnoktkm 1 / 1 / 3 Регистрация: 17.12.2017 Сообщений: 21
	07.04.2018, 15:23 [ТС]
	Qwerty_Wasd, спасибо, читаю... 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	07.04.2018, 15:26
	Tnoktkm, не за что, удачи 1

Центрирование картинки в div, которая вылазит за границы div

Решение