Dynamiczne skalowanie obrazów w celu dopasowania do określonego rozmiaru szerokości i wysokości

Question

Po szeroko zakrojonych poszukiwaniach i tonach rozwiązań jQuery i JavaScript po prostu nie mogłem znaleźć sposobu na dynamiczne skalowanie obrazów do określonego rozmiaru zarówno w pionie, jak iw poziomie, znalazłem tony informacji o skalowaniu w celu dopasowania do szerokości i zachowania proporcji lub skalowania, aby dopasować wysokość i zachować proporcje, ale nie mógł dowiedzieć się, czy obraz był zbyt wysoki lub zbyt krótki i odpowiednio dostosować.

Więc w moim przykładzie, miałem <div> o zadanej szerokości 460PX oraz zestaw wysokości 280px, i muszę obraz pasuje, wszystko z siebie w tej dziedzinie bez rozciągania (zachowując proporcje)

Answer 1

teraz po fiddling z niektórych przykładów szerokość moje klasyczne umiejętności algebra wyrzucił.

Gdybym wziął szerokość i podzielić go przez wysokość, a więc w tym przypadku 460/280 ty w zamian dostać 1.642 ... co to proporcje tego obszaru, teraz gdybym spojrzał na proporcje obrazu, wiedziałem, że jeśli był większy niż 1.642 ... to znaczy, że był szerszy niż obszar i jeśli proporcje obrazu było mniej niż, że był wyższy.

Więc wymyśliłem Poniżej

// 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.'">'; 

I to działało idealnie, więc myślałem, że chciałbym podzielić się, mam nadzieję, że to pomoże niektórym ludziom

Answer 2

Jeśli dobrze rozumiem Twoje pytanie, prostszy sposób skalowania obrazów byłoby użyć następujących zasad stylizacji CSS:

max-width 
max-height 

te dwie zasady stylizacji alow określić maksymalną szerokość/wysokość obrazu. Przeglądarka przeskaluje obraz (zachowując proporcje), aby dopasować się do podanego rozmiaru. Można również korzystać z tych dwóch, aby określić minimalną szerokość/wysokość dla obrazu:

min-width 
min-height