CSS - предотвратить масштабирование изображения?

Question

В моем CSS, я в настоящее время с помощью этого:

img.info { 
    max-width: 620px; 
    max-height: 800px; 
} 

К сожалению, когда мой образ меньше max-width и max-height, он получает широкий масштабы. Я думал, что стандартное поведение состояло в том, что масштабирование не произойдет, но, по-видимому, это не так. Есть ли способ предотвратить масштабирование изображения?

EDIT: Я нашел источник проблемы, он находится в совершенно другой части моей программы. Код, который я написал выше, работает отлично. Извините за ненужное сообщение!

Answer 1

Он прекрасно работает со следующими минималистский например:

<style> 
    img.a { 
     max-width: 640px; 
     max-height: 640px; 
    } 
</style> 

<img src="(my local image file)" class="a"> 

Изображение не масштабируются до. Конечно, это так, если я также добавлю width и height атрибутов. Поэтому проверьте, есть ли у вас какие-либо другие свойства CSS, которые могут применяться к вашему изображению. Вы можете использовать Firebug, чтобы узнать, какие свойства CSS применяются к вашему изображению.

Answer 2

Я думаю, я знаю, что вы имеете в виду. Я уверен, что у вас есть заданное пространство и вы хотите заполнить его изображением. изображение не должно быть сжато или растянуто, но пространство должно быть заполнено?

, то это может быть первой частью вашего решения:

div.info { 
    width: 620px; 
    height: 640px; 
    overflow: hidden; 
} 
​ 
<div class="info"><img class="info" src="http://www.sjphoto.com/hk-web/images/HK-skyscraper.jpg" width=640 /> </div>​ 

, что теперь вы можете сделать, это добавить обработчик OnLoad к изображению, которое вы передаете желаемую высоту, которая затем изменяет масштаб изображения изображения и позиционирует его в div, поэтому он обрезается одинаково. это может выглядеть примерно так (непроверено):

function scaleUp(el,height) { 
    if(el.height < height) { 
     var oldwidth = el.width; 
     el.deleteAttribute('width'); 
     el.height=height; 
     el.style.marginLeft=((oldwidth-el.width)/2)+'px'; 
    } else if(el.height > height) { 
     el.style.marginTop = '-'+((el.height-height)/2)+'px'; 
    } 
}