Работа с изображением

@SanychBY · Регистрация: 04.06.2013

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

Здравствуйте. Предположим у нас есть div 1000 на 1000 px и две картинки 1500 на 1500 и 100 на 100 пикселей.
предположим мы вставляем большую картинку в этот див, она вылезет за его приделы, если вставим маленькую она прижмется к верхнему углу(на сколько мне известно). Задача сделать так, чтобы большая картинка сохраняя пропорции ужалась по ширине (мне главное ограничение по ширине) и выравнять ее по отношению право лево по центру этого дива (верх низ не трогать). Тоже самое и для маленькой картинки, только если ей указать параметр widht, то она увеличится в размерах, что нам не желательно, так как потеряет качество, но нам по прежнему нужно выровнять ее по центру как и большую. Подскажите как это реализовать для картинок любого размера, если большая центровать и ужимать, если маленькая, то просто центровать. Спасибо.

@Tmin100 · 11.07.2013, 10:06

Для центровки используй правила:

CSS
1
2
3
4
5
text-align: center;
height: 140px;
width: 140px;
display: table-cell;
vertical-align: middle;

А для картинки в этом блоке:

CSS
1
2
max-width: 130px;
max-height: 130px;

Посмотри как я делал фотки: http://houseofmaestro.ru/maestros

@SanychBY · 11.07.2013, 11:01 **[ТС]**

Tmin100, первый код это для блока?

@Tmin100 · 11.07.2013, 13:10

Да, а второй для картинки внутри него, по ссылке можно посмотреть код сайта, там так сделано

@SanychBY · 11.07.2013, 14:51 **[ТС]**

Сообщение от Tmin100

Да, а второй для картинки внутри него, по ссылке можно посмотреть код сайта, там так сделано

Спасибо попробуем. стильный сайт.

Добавлено через 8 минут
Tmin100, Буду благодарен если поможете решить данный вопрос Размер видео с youtube

Добавлено через 1 час 11 минут

Сообщение от Tmin100

Для центровки используй правила:

Для картинки - все работает. Для дива - не центруется

Добавлено через 1 минуту
Какая то ерунда. маленькая отцентровалась, а большая нет

Добавлено через 46 секунд
http://smartapk.vv.si/article?a=2
там белиберда, но том эти картинки. Посмотрите, заметно что большая не по центру

@Tmin100 · 11.07.2013, 15:58

У меня картинка в тег a обёрнута, поэтому сработал text-align: center;
надо тогда как то по другому, возможно поможет vertical-align

@SanychBY · 11.07.2013, 16:51 **[ТС]**

Tmin100, vertical-align: middle; не работает

Добавлено через 48 минут
Эх верстальщики.....
для блока

CSS
1
2
3
width: 540px;
 
    display: block; margin: 0 auto;

для картинки

CSS
1
2
display: block; margin: 0 auto;
    max-width:540px;

И все работает лучше швейцарских часов.

@Tmin100 · 11.07.2013, 17:27

margin: auto у меня не всегда работал, вот его и не предложил, а так самое очевидное решение))

@SanychBY · 11.07.2013, 17:29 **[ТС]**

Tmin100, так и у меня не работал пока не приписал display

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532

	Работа с изображением 11.07.2013, 01:14. Показов 938. Ответов 8 Метки нет (Все метки) Здравствуйте. Предположим у нас есть div 1000 на 1000 px и две картинки 1500 на 1500 и 100 на 100 пикселей. предположим мы вставляем большую картинку в этот див, она вылезет за его приделы, если вставим маленькую она прижмется к верхнему углу(на сколько мне известно). Задача сделать так, чтобы большая картинка сохраняя пропорции ужалась по ширине (мне главное ограничение по ширине) и выравнять ее по отношению право лево по центру этого дива (верх низ не трогать). Тоже самое и для маленькой картинки, только если ей указать параметр widht, то она увеличится в размерах, что нам не желательно, так как потеряет качество, но нам по прежнему нужно выровнять ее по центру как и большую. Подскажите как это реализовать для картинок любого размера, если большая центровать и ужимать, если маленькая, то просто центровать. Спасибо. 0

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	11.07.2013, 11:01 [ТС]
	Tmin100, первый код это для блока? 0

@Tmin100 6 / 6 / 1 Регистрация: 12.10.2012 Сообщений: 71
	11.07.2013, 13:10
	Да, а второй для картинки внутри него, по ссылке можно посмотреть код сайта, там так сделано 0

@Tmin100 6 / 6 / 1 Регистрация: 12.10.2012 Сообщений: 71
	11.07.2013, 15:58
	У меня картинка в тег a обёрнута, поэтому сработал text-align: center; надо тогда как то по другому, возможно поможет vertical-align 0

@Tmin100 6 / 6 / 1 Регистрация: 12.10.2012 Сообщений: 71
	11.07.2013, 17:27
	margin: auto у меня не всегда работал, вот его и не предложил, а так самое очевидное решение)) 0

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	11.07.2013, 17:29 [ТС]
	Tmin100, так и у меня не работал пока не приписал display 0