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

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

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

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

@Tmin100 · 11.07.2013, 10:06

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

CSS

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

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
		1
	Работа с изображением 11.07.2013, 01:14. Показов 803. Ответов 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 [ТС]	3
	Tmin100, первый код это для блока? 0

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

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	11.07.2013, 14:51 [ТС]	5
	Сообщение от Tmin100 Да, а второй для картинки внутри него, по ссылке можно посмотреть код сайта, там так сделано Спасибо попробуем. стильный сайт. Добавлено через 8 минут Tmin100, Буду благодарен если поможете решить данный вопрос Размер видео с youtube Добавлено через 1 час 11 минут Сообщение от Tmin100 Для центровки используй правила: Для картинки - все работает. Для дива - не центруется Добавлено через 1 минуту Какая то ерунда. маленькая отцентровалась, а большая нет Добавлено через 46 секунд http://smartapk.vv.si/article?a=2 там белиберда, но том эти картинки. Посмотрите, заметно что большая не по центру 0

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

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

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