Как отобразить часть изображения для определенной ширины и высоты?

Question

Недавно я участвовал в веб-проекте, который имеет огромное количество изображений для обработки и отображения на веб-странице, мы знаем, что ширина и высота загружаемых конечных пользователей изображений не могут быть легко управляемы, а затем их трудно отобразить. Во-первых, я попытался увеличить/уменьшить масштаб изображения, чтобы rearch соответствующее представление, и я сделал это, но мой босс еще не доволен моим решением, следующий мой путь:

var autoResizeImage = function(maxWidth, maxHeight, objImg) { 
    var img = new Image(); 
    img.src = objImg.src; 

    img.onload = function() { 
     var hRatio; 
     var wRatio; 
     var Ratio = 1; 

     var w = img.width; 
     var h = img.height; 

     wRatio = maxWidth/w; 
     hRatio = maxHeight/h; 

     if (maxWidth == 0 && maxHeight == 0) { 
      Ratio = 1; 
     } else if (maxWidth == 0) { 
      if (hRatio < 1) { 
       Ratio = hRatio; 
      } 
     } else if (maxHeight == 0) { 
      if (wRatio < 1) { 
       Ratio = wRatio; 
      } 
     } else if (wRatio < 1 || hRatio < 1) { 
      Ratio = (wRatio <= hRatio ? wRatio : hRatio); 
     } 

     if (Ratio < 1) { 
      w = w * Ratio; 
      h = h * Ratio; 
     } 

     w = w <= 0 ? 250 : w; 
     h = h <= 0 ? 370 : h; 

     objImg.height = h; 
     objImg.width = w; 
    }; 
}; 

Этот путь предназначен только для ограничения максимальной ширины и высоты изображения, так что каждое изображение в альбоме по-прежнему имеет разную ширину и высоту, которые все еще очень актуальны.

И в эту минуту я знаю, что мы можем создать DIV и использовать изображение в качестве фонового изображения, этот способ слишком сложный и не прямой, который я не хочу принимать. Поэтому мне интересно, есть ли лучший способ отображать изображения с фиксированной шириной и высотой без искажения представления?

Спасибо.

Answer 1

Я бы порекомендовал взглянуть на что-то вроде twitter bootstraps carousel. При этом они используют тег изображения внутри DIV и размера, установив свойства изображения на что-то вроде

img { 
    height: auto; 
    max-width: 100%; 
} 

Вы можете увидеть небольшой пример в этом little fiddle.

Установив высоту в auto, она сохранит соотношение неповрежденным. Установив max-width: 100%, он не будет увеличивать изображение до его первоначального размера.

Answer 2

Я решил эту задачу выполнить следующие шаги:

1, запись способ для увеличения/уменьшения изображения в соответствующей ширины и высоты вы хотите:

var autoResizeImage = function(targetWidth, targetHeight, objImg) { 
    if (0 >= targetWidth || 0 >= targetHeight) { 
     // Ilegal parameters, just return. 
     return; 
    } 

    var img = new Image(); 
    img.src = objImg.src; 

    // Calculate the width and height immediately the image is loaded. 
    img.onload = function() { 
     var hRatio; 
     var wRatio; 

     var width = img.width; 
     var height = img.height; 

     var calcWidth = width; 
     var calcHeight = height; 

     wRatio = targetWidth/width; 
     hRatio = targetHeight/height; 

     if (wRatio < hRatio) { 
      calcWidth = targetWidth; 
      calcHeight = (targetHeight/height) * targetHeight; 
     } else { 
      calcHeight = targetHeight; 
      calcWidth = (targetWidth/width) * targetWidth; 
     } 

     objImg.width = calcWidth; 
     objImg.height = calcHeight; 
    }; 
}; 

, а затем вызвать этот метод в OnLoad событие, как

<img src='PATH' onload='autoResizeImage(740, 460, this)'/> 

2 Создать DIV за пределами этого образа и стиля ширину и высоту, что вы хотите, чтобы изображение отображается с:

<div style='width: 740px; height: 460px; overflow:hidden;'></div> 

И тогда изображение будет отображаться с фиксированной шириной и высотой, которую вы установили.

Спасибо за друзей с этого сайта.