ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как кадрировать изображение по центру с помощью CSS?
5 сообщений из 5, страница 1 из 1
Как кадрировать изображение по центру с помощью CSS?
    #38098188
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shitbox2
Участник
Делаю так:
Код: javascript
1.
2.
3.
<a href="#" style="display: block; overflow: hidden; position: relative; width: 300px; height: 300px;">
    <img src="uploads/50e13ecf65434.jpeg" style="position:absolute; max-width: 400px; max-height: 400px; margin: 0 0 0 -50px;">
</a>


К сожалению, это не работает для вытянутых изображений (для них нужно выставлять margin: -50px 0 0 0). Как сделать, чтобы центральная часть изображения вписывалась в квадрат с минимальной обрезкой по краям?
...
Рейтинг: 0 / 0
31.12.2012, 19:07
| Ответить | Цитировать | Написать  
Как кадрировать изображение по центру с помощью CSS?
    #38098208
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
В соседнем топике кардинально противоположная проблема. Можно, конечно, картинку стилями кромсать или вычислять размеры. А можно положиться на свойство background:url(...) no-repeat center center; и картинка разместится по центру, с "обрезанными" краями, в исходной пропорции размеров. Не подойдет?
...
Рейтинг: 0 / 0
31.12.2012, 20:37
| Ответить | Цитировать | Написать  
Как кадрировать изображение по центру с помощью CSS?
    #38098294
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shitbox2
Участник
А если картинка 4000х3000, то по центральной части навряд ли можно будет что-нибудь понять)
...
Рейтинг: 0 / 0
01.01.2013, 06:28
| Ответить | Цитировать | Написать  
Как кадрировать изображение по центру с помощью CSS?
    #38098299
vkle
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vkle
Участник
Shitbox2А если картинка 4000х3000А нафига такую картинку браузеру отдавать? Она ж с явным жестоким "перегрузом" по размеру.
...
Рейтинг: 0 / 0
01.01.2013, 08:33
| Ответить | Цитировать | Написать  
Как кадрировать изображение по центру с помощью CSS?
    #38098304
Shitbox2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Shitbox2
Участник
vkle, такую картинку может прочитать FileReader. Тут сервер пользователю ничего не отдает. Нашел в CSS3 свойство background-size: cover — то что надо!
...
Рейтинг: 0 / 0
01.01.2013, 10:22
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как кадрировать изображение по центру с помощью CSS?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38098299&tid=1448905]:
 0ms
get settings:
 6ms
get forum list:
 20ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 166ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 206ms
total:  461ms
созд. / загр.: 461ms
x
x
Закрыть


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