Форумы портала PHP.SU :: Версия для печати :: Вопрос по html - соблюдение картинкой пропорций, как сделать?

2. esterio - 01 Октября, 2014 - 12:51:09 - перейти к сообщению

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

3. Webtest - 01 Октября, 2014 - 12:53:45 - перейти к сообщению

esterio, да, браузер растягивает по ним картинку, а как сделать так, чтобы картинка не растягивалась, а просто вписывалась в ширину/высоту, сохраняя свои пропорции?

4. imper - 01 Октября, 2014 - 12:54:24 - перейти к сообщению

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

5. Webtest - 01 Октября, 2014 - 12:56:29 - перейти к сообщению

imper, можно пример как, а то я только начал изучать js. Закатив глазки

CODE (html):
скопировать код в буфер обмена

img.slideImage {        
        max-width: 990px;
        max-height: 471px;
        background-color: white;
        width: 990px;
        height: 471px;
}

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

6. esterio - 01 Октября, 2014 - 12:59:06 - перейти к сообщению

http://www[dot]ajaxblender[dot]com/howto[dot][dot][dot]-javascript[dot]html

7. Webtest - 01 Октября, 2014 - 13:03:57 - перейти к сообщению

Подскажите, как вставить эту функцию из яваскрипта

CODE (javascript):
скопировать код в буфер обмена

<script type="text/javascript" src="/jslibs/mootools-1.2.4.js"></script>
<script type="text/javascript">
    function scaleSize(maxW, maxH, currW, currH){
        var ratio = currH / currW;
        if(currW >= maxW && ratio <= 1){
            currW = maxW;
            currH = currW * ratio;
        } else if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
        }
        return [currW, currH];
    }
</script>

В код:

CODE (html):
скопировать код в буфер обмена

<img class="slideImage" src="slides/<?php echo $value; ?>" alt="slide">