Используйте <div> с фоновым изображением вместо <img>. Если рассматриваемое изображение имеет размер 100 на 50 пикселей (например), то что-то вроде этого должно сработать:
<div style="display: inline-block; width: 100px; height: 50px: background: url(/path/to/image.jpg);"></div>
Если вам требуется поддержка IE7, вам, вероятно, придется изменить display: inline-block на display: block, используя таблицу стилей, специфичную для IE7 (желательно загруженную с помощью условного комментария).
Проблема с вышесказанным заключается в том, что вам необходимо знать размеры изображения, прежде чем заменять теги <img> тегами <div> на фон. Вы можете выполнить замену на стороне клиента, используя jQuery, чтобы обойти эту проблему, но для обеспечения загрузки изображений перед их заменой требуется некоторая осторожность:
$(window).load(function() {
$('img').each(function() {
var $img = $(this);
var $replacement = $('<div/>');
$replacement.css({
width: $img.width() + 'px',
height: $img.height() + 'px',
display: 'inline-block',
background: 'url(' + $img.attr('src') + ')'
});
$img.after($replacement).remove();
});
});
$(window).load() не должен срабатывать до тех пор, пока все не будет загружено, поэтому все размеры изображений должны быть известны при этом.
Если IE7 является проблемой, вы можете поместить бит display: inline-block в класс и переопределить его, используя таблицу стилей, специфичную для IE7, обычным способом.