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


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