Динамически масштабируемые изображения, соответствующие размеру и размеру заданного размера

Question

Итак, после обширных исследований и тонких решений jQuery и Javascript я просто не мог найти способ динамически масштабировать изображения до определенного размера как по горизонтали, так и по вертикали, информации о масштабировании, чтобы она соответствовала ширине и сохраняла соотношение сторон или масштабирование, чтобы она соответствовала высоте и сохраняла соотношение сторон, но не могла понять, было ли изображение слишком высоким или слишком коротким и соответствующим образом отрегулировано.

Так в моем примере, я имел <div> с установленной шириной от 460 пикселей и заданной высоты 280 пикселей, и мне нужно изображение, чтобы соответствовать, все само по себе в этой области без растяжения (сохраняя пропорции)

Answer 1

Теперь после того, как возиться с некоторыми примерами ширины мои классические навыки алгебры проломили.

Если бы я взял ширину и разделить его на высоту, так что в этом случае, 460/280 вы взамен получите 1.642 ... который это соотношение сторон этой области, теперь, если посмотреть на соотношение сторон изображения, я знал, что если оно больше 1,642 ... это означает, что оно было шире, чем площадь, и если соотношение сторон изображения было меньше чем, что он был выше.

Так что я придумал следующее,

// Set the Image in question 
$image = 'img/gif/b47rz.gif'; 

// Set the width of the area and height of the area 
$inputwidth = 460; 
$inputheight = 280; 

// Get the width and height of the Image 
list($width,$height) = getimagesize($image); 

// So then if the image is wider rather than taller, set the width and figure out the height 
if (($width/$height) > ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = ($inputwidth * $height)/ $width; 
     } 
// And if the image is taller rather than wider, then set the height and figure out the width 
     elseif (($width/$height) < ($inputwidth/$inputheight)) { 
      $outputwidth = ($inputheight * $width)/ $height; 
      $outputheight = $inputheight; 
     } 
// And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well 
     elseif (($width/$height) == ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = $inputheight; 
      } 
// Echo out the results and done 
echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">'; 

И она работала отлично, так что я думал, что я хотел бы поделиться, надеюсь, что это помогает некоторым людям

Answer 2

Если я правильно понял ваш вопрос правильно, я простой способ масштабирования изображения будет использовать следующие правила стилей CSS:

max-width 
max-height 

Эти два правила моделирования Alow можно указать максимальную ширину/высоту изображения. Браузер масштабирует изображение вниз (сохраняя пропорции) в соответствии с указанным вами размером. Вы также можете использовать эти два, чтобы определить минимальную ширину/высоту изображения:

min-width 
min-height