Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Вопрос по html - соблюдение картинкой пропорций, как сделать?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Webtest
Отправлено: 01 Октября, 2014 - 12:48:41
Post Id


Посетитель


Покинул форум
Сообщений всего: 286
Дата рег-ции: Июнь 2014  


Помог: 0 раз(а)
Здравствуйте.
Есть разные изображения и цсс к ним:
CODE (html):
скопировать код в буфер обмена
  1. img.slideImage {       
  2.         background-color: white;
  3.         width: 990px;
  4.         height: 471px;
  5. }

Как сделать так, чтобы изображение не растягивалось, а было уменьшено по меньшей стороне? Например, как тут, где написано contain: http://htmlbook[dot]ru/css/-o-object-fit
Пробовал: -o-object-fit: contain или background-size: contain но не работает. Вот код пикчи, для примера.
CODE (html):
скопировать код в буфер обмена
  1. <img class="slideImage" src="/slides/<?php echo $value; ?>" alt="slide">

Только как это сделать недобавляя дополнительные ДИВы!
 
 Top
esterio
Отправлено: 01 Октября, 2014 - 12:51:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
браузер сам делает пропорции если указано только ширина или висота
 
 Top
Webtest
Отправлено: 01 Октября, 2014 - 12:53:45
Post Id


Посетитель


Покинул форум
Сообщений всего: 286
Дата рег-ции: Июнь 2014  


Помог: 0 раз(а)
esterio, да, браузер растягивает по ним картинку, а как сделать так, чтобы картинка не растягивалась, а просто вписывалась в ширину/высоту, сохраняя свои пропорции?
 
 Top
imper
Отправлено: 01 Октября, 2014 - 12:54:24
Post Id



Частый гость


Покинул форум
Сообщений всего: 134
Дата рег-ции: Февр. 2012  
Откуда: Тольятти


Помог: 2 раз(а)

[+]
ну если как по ссылке то тогда так
js'ом проверяешь высоту и ширину картинки и уменьшаешь по меньшей стороне
и ставишь границы уменьшения min-height(width) или увеличения max-height(width)
http://htmlbook[dot]ru/css/max-height

(Отредактировано автором: 01 Октября, 2014 - 12:56:02)



-----
Самое лучшее решение проблемы
самое простое
 
 Top
Webtest
Отправлено: 01 Октября, 2014 - 12:56:29
Post Id


Посетитель


Покинул форум
Сообщений всего: 286
Дата рег-ции: Июнь 2014  


Помог: 0 раз(а)
imper, можно пример как, а то я только начал изучать js. Закатив глазки
CODE (html):
скопировать код в буфер обмена
  1. img.slideImage {       
  2.         max-width: 990px;
  3.         max-height: 471px;
  4.         background-color: white;
  5.         width: 990px;
  6.         height: 471px;
  7. }

Так все равно растягивается.

(Отредактировано автором: 01 Октября, 2014 - 12:58:46)

 
 Top
esterio
Отправлено: 01 Октября, 2014 - 12:59:06
Post Id



Активный участник


Покинул форум
Сообщений всего: 5025
Дата рег-ции: Нояб. 2012  
Откуда: Украина, Львов


Помог: 127 раз(а)
 
 Top
Webtest
Отправлено: 01 Октября, 2014 - 13:03:57
Post Id


Посетитель


Покинул форум
Сообщений всего: 286
Дата рег-ции: Июнь 2014  


Помог: 0 раз(а)
Подскажите, как вставить эту функцию из яваскрипта
CODE (javascript):
скопировать код в буфер обмена
  1. <script type="text/javascript" src="/jslibs/mootools-1.2.4.js"></script>
  2. <script type="text/javascript">
  3.     function scaleSize(maxW, maxH, currW, currH){
  4.         var ratio = currH / currW;
  5.         if(currW >= maxW && ratio <= 1){
  6.             currW = maxW;
  7.             currH = currW * ratio;
  8.         } else if(currH >= maxH){
  9.             currH = maxH;
  10.             currW = currH / ratio;
  11.         }
  12.         return [currW, currH];
  13.     }
  14. </script>

В код:
CODE (html):
скопировать код в буфер обмена
  1. <img class="slideImage" src="slides/<?php echo $value; ?>" alt="slide">

(Отредактировано автором: 01 Октября, 2014 - 13:15:15)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB