Блог

На веб-странице должно отображаться несколько изображений. И предполагается, что изображения должны отображаться так, чтобы они соответствовали квадрату (90 * 90 пикселей). К сожалению, размер изображений непредсказуем. Они могут быть 80 * 100 или 100 * 80 или 90 * 110.

Требуется растянуть изображение следующим образом:
1) Если изображение имеет ширину 45 и высоту 100, растяните его ширину до 90, а высоту до 200. Отобразите его верхние 90 пикселей.
2) Если изображение имеет ширину 100 и высоту 45, увеличьте его ширину до 200, а высоту до 90. Отобразите его левые 90 пикселей.

Одним словом, всегда оставляйте верхнюю левую часть изображения размером 90 * 90.

Каково решение для этого в JavaScript и CSS? Спасибо

Сработает ли это?

 <div style="width:90px;height:90px;border:1px solid #000;background-position:left top;background-image:url('myImage.jpg');background-size:100%;"></div>
  

Пример на http://snuzzer.dk/pub/fit_image_to_div.html

Обновить:

Я изменил его, чтобы вместо этого использовать JavaScript. Это должно решить проблему с отсутствием правильного отображения ширины / высоты при использовании подхода, основанного только на CSS. Взгляните на http://snuzzer.dk/pub/fit_image_to_div.html для примера.

 <script type="text/javascript">
function fitImage(src) {
    var image = new Image();
    image.src = src;
    var height = image.height;
    var width = image.width;

    if(width > height) { // Image is wider than it's high
        scale = 90 / height;
    }
    else { // Image is higher than it's wide
        scale = 90 / width;
    }

    image.width = width * scale;
    image.height = height * scale;

    document.getElementById('info').innerHTML = width   'x'   height   ' => '   image.width   'x'   image.height;

    document.getElementById('container').style.backgroundImage = 'url('   image.src   ')';
    document.getElementById('container').style.backgroundSize = image.width   'px '   image.height   'px';
}
</script>
<div style="width:90px;height:90px;border:1px solid #000;background-position:left top;" id="container"></div>
<div id="info"></div>
URL to an image: <input type="text" id="url" style="width:400px;" />
<br />
<input type="button" value="Fit images" onClick="fitImage(document.getElementById('url').value)" />