Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Масштабирование изображений в HTML, Изображение должно быть опред. размера 
:(
    Опции темы
kma21
Дата 7.5.2009, 20:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.7.2008

Репутация: нет
Всего: нет



Привет всем! Пишу я на HTML дискографию всего своего архива музыкального. Есть обложки различные (всмысле размеров). Как вставить изображение в определЁнную "рамку". Т.е. независимо от исходного размера картинки, вставлять картинку с определЁнным размером. Но не обрезать, а масштабировать.
PM MAIL   Вверх
bars80080
Дата 7.5.2009, 22:12 (ссылка) |   (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



определяешься с параметром масштабирования - обычно это ширина. скажем 200 пикселей

теперь пишем в стилях:

Код

img.alb { width: 200px; }


а в каждой картинке, у которой должен быть этот размер:

Код

<img class="alb" src="..." />

PM MAIL WWW   Вверх
kma21
Дата 8.5.2009, 13:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.7.2008

Репутация: нет
Всего: нет



А это будет именно масштабирование или же обрезка по указанному размеру?
PM MAIL   Вверх
bars80080
Дата 8.5.2009, 16:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



масштабирование, ибо высота подстроится под указанную ширину в соответствии с реальными пропорциями

вообще, обрезку сделать гораздо сложнее, а может даже и невозможно (если речь идёт не о картике 1:1)
PM MAIL WWW   Вверх
kma21
Дата 8.5.2009, 20:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 13.7.2008

Репутация: нет
Всего: нет



Спасибо, буду пробовать.
PM MAIL   Вверх
CruorVult
Дата 12.5.2009, 11:58 (ссылка)    | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28



Вот более рациональный способ:
Код

.max_img{
    width: expression(document.getElementById("myImg") > 120 ? "120px" : "auto");
    max-width: 120px;
    height: expression(document.getElementById("myImg") > 120 ? "120px" : "auto");
    max-height: 120px;    
    }

Код

<img id="myImg" class="max_img" src="...">

PM MAIL Skype   Вверх
bars80080
Дата 12.5.2009, 13:59 (ссылка)    | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



и чем же он более рациональный? увеличением количества строк в 4 раза, да переложение реализации с css на js, чтобы не у всех работало?

Добавлено через 1 минуту и 13 секунд
к тому же нацелен всего на одну картинку, придётся на каждую из альбома по 4 строчки писать

это ### какой-то
PM MAIL WWW   Вверх
CruorVult
Дата 13.5.2009, 08:59 (ссылка)    | (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 1
Всего: 28



Цитата(bars80080 @  12.5.2009,  13:59 Найти цитируемый пост)
и чем же он более рациональный?

Я веду к тому что если использовать 
Код
img.alb { width: 200px; }

то при размере изображения меньше 200 пикселей оно будет растягиватся

Добавлено через 2 минуты и 40 секунд
Цитата(bars80080 @  12.5.2009,  13:59 Найти цитируемый пост)
к тому же нацелен всего на одну картинку, придётся на каждую из альбома по 4 строчки писать

Почему же? Просто айдишник одинаковый прописать smile 

PM MAIL Skype   Вверх
bars80080
Дата 13.5.2009, 14:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(CruorVult @  13.5.2009,  08:59 Найти цитируемый пост)
Просто айдишник одинаковый прописать 

пустить пулю в голову за такое афигенно валидное решение. как у вас там javascript вообще работает?
Цитата(CruorVult @  13.5.2009,  08:59 Найти цитируемый пост)
то при размере изображения меньше 200 пикселей оно будет растягиватся

утвердить для тех, что не должны растягиваться - другой класс
PM MAIL WWW   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0583 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.