ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css div ровно по центру изображения
6 сообщений из 6, страница 1 из 1
css div ровно по центру изображения
    #38805625
Фотография yardie
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
yardie
Участник
Привет всем, собсно такой вопрос:
на сайт пользователь грузит аваторку, изображение пропорционально уменьшается до width 220px(height - пропорционально).
далее в div 100x100 закидывается img с этим изображением.
вот так
Код: html
1.
2.
3.
4.
5.
 <td>
                            <div style="overflow: hidden; width: 100px; height: 100px; margin-top: 5px;">
                                <img alt="" id="avatar" src="@ViewBag.AvatarPath" style="margin-left:-50%;margin-top:-50%;" />
                            </div>
                        </td>


вот этот самый квадратный div 100х100 должен в аккурат в центре изображения быть.
аваторки совершенно разных размеров грузят и широкие-коротки и длинные-узкие.

в моей разметки div часто не по середине изображения...
не особо я верстальщик, подскажите как правильно сделать?
...
Рейтинг: 0 / 0
14.11.2014, 01:26
| Ответить | Цитировать | Написать  
css div ровно по центру изображения
    #38805706
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
yardieвот этот самый квадратный div 100х100 должен в аккурат в центре изображения быть.
Материнский элемент в центре дочернего?
...
Рейтинг: 0 / 0
14.11.2014, 08:26
| Ответить | Цитировать | Написать  
css div ровно по центру изображения
    #38806045
Фотография yardie
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
yardie
Участник
ну наверно да)
...
Рейтинг: 0 / 0
14.11.2014, 12:08
| Ответить | Цитировать | Написать  
css div ровно по центру изображения
    #38806145
brbrbr
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
brbrbr
Участник
yardieну наверно да)Дочерний элемент на то и дочерний, что находится _внутри_ родительского.

yardieне особо я верстальщик, подскажите как правильно сделать?Для начала нормально сформулировать задачу. :)
...
Рейтинг: 0 / 0
14.11.2014, 12:44
| Ответить | Цитировать | Написать  
css div ровно по центру изображения
    #38806155
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
yardieну наверно да)ну, это примерно как попытаться засунуть коробку от телевизора в коробку из-под обуви. не складывая. нужно быть не совсем в адеквате.

в принципе можно попробовать сделать у td position:relative, а у img и div absolute и overflow у дива убрать.
...
Рейтинг: 0 / 0
14.11.2014, 12:47
| Ответить | Цитировать | Написать  
css div ровно по центру изображения
    #38806279
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
yardieну наверно да)
Тут бы самое время изменить задачу впринципе. Например так:
- Как расположить некую картинку по центру моего квадрата?

Тут может прийти на помощь ЦСС3...

Например такой вариант работает у меня в Хроме

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.avatar {
	width: 100px;
	height: 100px;
	border: 1px solid;
	background-size: contain;
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<div class='avatar' style='background-image: url("http://s40.radikal.ru/i089/1112/c0/7a83ed4a9842.jpg");'></div>
<div class='avatar' style='background-image: url("http://www.gamer.ru/system/attached_images/images/000/449/414/original/dice.png");'></div>
</body>
</html>
...
Рейтинг: 0 / 0
14.11.2014, 13:36
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / css div ровно по центру изображения
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38806279&tid=1446531]:
 0ms
get settings:
 9ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 105ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 47ms
get tp. blocked users:
 2ms
others: 248ms
total:  454ms
созд. / загр.: 454ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]