Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2016, 15:45
Новичок на форуме
Отправить личное сообщение для skynet32rus Посмотреть профиль Найти все сообщения от skynet32rus
 
Регистрация: 28.04.2016
Сообщений: 1

Визуально обрезать изображение сверху и снизу и ценрировать растянув по ширине блока.
Не понимаю как сделать всё красиво.
Делаю так:

Код:
.block_short_img_box {
	overflow:hidden;
	width: 100%;
	height: 350px;
	border-radius: 2px 2px 0px 0px;
}

.block_short_img_box img {
    position: relative;
    top: -17%;
    width: 100% !important;
}
Когда изображение большое всё нормально, оно пропорционально обрезается. Но если оно маленькое то оно растягивается пропорционально ширине но вот потом остается огромный отступ снизу изображения, просто белое поле.

Может можно как то с помощью скриптов решить проблему центрирования и растягивания.

Нужно в общем что бы если изображение 870x460 или больше то просто сверху и снизу обрезалось и центрировалось, а если например 500x200 то оно растягивалось до размеров 870x460 и не обрезалось, а просто было по размеру блока.

Уже голова болит, не могу понять как так сделать!
Ответить с цитированием
  #2 (permalink)  
Старый 28.04.2016, 16:09
Аватар для Viral
Профессор
Отправить личное сообщение для Viral Посмотреть профиль Найти все сообщения от Viral
 
Регистрация: 26.04.2011
Сообщений: 472

background-size:cover не пробовали?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск