Как пропорционально настроить размер изображения, чтобы он соответствовал размерам миниатюры 200px x 150px в CSS? - PullRequest
Новая
       53

Как пропорционально настроить размер изображения, чтобы он соответствовал размерам миниатюры 200px x 150px в CSS?

2 голосов
/ 20 февраля 2011

Я попробовал пару вещей, даже используя CSS-клип, но не получая его пропорционально вписать в эскизы здесь http://giantmango.com/arttest2-2510.

В CSS, как лучше и как это сделатьЯ пропорционально изменяю размер изображения, чтобы отобразить его в виде миниатюр размером 200px (ширина) x 150 (высота)?

Только что проверил firebug и по какой-то причине все мои теги img всегда установлены на высоту 200, хотя ямаксимальная высота 150 ...

Ответы [ 2 ]

2 голосов
/ 20 февраля 2011

Используйте максимальная высота и максимальная ширина . Остерегайтесь, что они сломаны в более старых версиях IE. Вы можете сделать 

#myImage: {
    max-height: 150px;
    max-width: 200px;
}

РЕДАКТИРОВАТЬ : @tokiowp: попробуйте это. Это должно работать (это, безусловно, работает для меня). Таким образом, проблема с вашим макетом возникает из-за дополнительных свойств, которые вы могли установить. 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
    </body>
</html>

РЕДАКТИРОВАТЬ : получается, глядя на ваш источник, что вы фактически объявляете свои изображения с чем-то вроде 

<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78"  width="200" height="200"/>

Конечно, вам нужно удалить эти объявления width и height.

0 голосов
/ 22 февраля 2011

css: 

#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}

html: 

<div id="thumb"><img src="tb01.jpg"></div>
...