Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.91/34: Рейтинг темы: голосов - 34, средняя оценка - 4.91
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
#1

Картинка на всю высоту с сохранением пропорций

20.11.2010, 17:15. Просмотров 6139. Ответов 6
Метки нет (Все метки)

У меня fixed-блок, в нём картинка, которая должна быть на всю высоту, но максимум на всю ширину. Как такое реализовать? Пропорции должны сохраняться.
CSS
1
2
max-width: 100%;
height: 100%;
при этой записи пропорции не сохраняются. Если написать max-height, то если картинка маленькая, то она никогда не будет в 100% по высоте.
Заранее благодарен.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.11.2010, 17:15
Ответы с готовыми решениями:

Масштабирование с сохранением пропорций
Господа, можно ли добиться такогоже эффекта но без использование JS, на чистом...

Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента
Всем привет. Сразу к делу. Сайт делаю резиновым. Структура сайта по сути из...

Сделать список на всю ширину и сделать border-right не на всю высоту
Доброго времени суток. 1. Как сделать border-right не на всю высоту. Вот как...

Не растягивается во всю высоту
Подскажите, пожалуйста, как заставить div класса main растягиваться по...

Фон не на всю высоту
Здравствуйте! Создал главный Див контейнер и в него уже ложу основные блоки Див...

6
Alligieri
CEO
Эксперт С++
2253 / 1243 / 57
Регистрация: 16.03.2009
Сообщений: 3,588
20.11.2010, 21:36 #2
Цитата Сообщение от Hagrael Посмотреть сообщение
должна быть на всю высоту
всю высоту страницы или свою собственную? (про ширину вроде понятно)

как я сейчас понимаю получается - растянута ввысоту и сохраняет свою ширину?
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
21.11.2010, 07:57  [ТС] #3
Alligieri, во всю высоту страницы. Она должна объязательно сохранять свои пропорции, но если пропорции позволяют, то быть во всю высоту, если не позволяют (ширина если слишком маленькая к примеру), то она должна сокращаться по высоте. И максимальная ширина должна быть также во всю страницу.
0
Alligieri
CEO
Эксперт С++
2253 / 1243 / 57
Регистрация: 16.03.2009
Сообщений: 3,588
21.11.2010, 12:30 #4
Hagrael, вот что я нашел

Немного инглиша
Because CSS can only scale height or width at time – not both, if you wan’t to keep the original aspect ratio. CSS doesn’t count aspect ratio – because CSS can’t do that. You need a plugin to do that.

Plugin could scale images with inline-style althought – so you can use CSS, but not at by it self. And Javascript could easily done that, but it’s browserside code – so it’s up to you if you use it. But JS could count aspect ratio.


Добавлено через 54 секунды
получается что только CSS такое не решить... я еще попробую подумать
1
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
21.11.2010, 13:29  [ТС] #5
Alligieri, благодарен, жду ответа.

Добавлено через 20 секунд
Я тоже пока что похимичу
0
Alligieri
CEO
Эксперт С++
2253 / 1243 / 57
Регистрация: 16.03.2009
Сообщений: 3,588
21.11.2010, 14:38 #6
Hagrael, пробовал игратся с auto, но пока удалось только чтоб картинка масштабировалась не более чем на 100% высоты

Добавлено через 13 минут
Hagrael, по отдельности получается (тоесть только относительно высоты или относительно ширины):

CSS
1
2
3
4
5
6
7
<style>
.widthScale { max-width: 100%; max-height: 100%; width: 100%; height:auto
}
 
.heightScale { max-width: 100%; max-height: 100%; width: auto; height:100%
}
</style>
а вот как вместе?
2
Hagrael
БТР - мой друг
331 / 273 / 47
Регистрация: 07.01.2010
Сообщений: 1,932
22.11.2010, 12:18  [ТС] #7
Alligieri, это не то, что мне нужно. Думаю, что мою задачу можно решить только на JavaScript.
0
22.11.2010, 12:18
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.11.2010, 12:18

Body на всю высоту
Всем привет! использую пример...

Блок на всю высоту
Как делаются блоки на всю высоту? Мне нужно сделать резиновую верстку, все...

Сайт на всю высоту экрана
Вопрос, header высотой 100px, Как указать блоку main занять все свободное...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru