Как установить максимальную высоту для $ img, но сохранить пропорции - PullRequest
Новая
       21

Как установить максимальную высоту для $ img, но сохранить пропорции

10 голосов
/ 22 декабря 2009

Как установить максимальную высоту или ширину для:

$ img_attributes = 'высота = 100 ширина = 100'. 'Альт = "'. $ Произведение [ 'product_name']. '"';

Ответы [ 4 ]

17 голосов
/ 22 декабря 2009

Ну, есть свойства CSS max-height и max-width, не так ли? Они работают во всех основных браузерах, кроме IE 6 и IE 7.

4 голосов
/ 22 декабря 2009

Вам следует проверить этот ответ для получения общей информации: Пропорциональное изменение размера изображения .

Если вы хотите изменить размер изображения без использования серверной части, я предлагаю вам использовать Javascript. Вот учебник .

Короче говоря, у вас есть функция JavaScript, которая будет возвращать новые ширину и высоту: 

function scaleSize(maxW, maxH, currW, currH){
  var ratio = currH / currW;
  if(currW >= maxW){
        currW = maxW;
        currH = currW * ratio;
  } else >if(currH >= maxH){
        currH = maxH;
        currW = currH / ratio;
  }
  return [currW, currH];
}

С помощью этой функции вы можете установить ширину и высоту изображения: 

img.width = newW;
img.height = newH;

Но лучшим способом было бы сделать это на стороне сервера. Это предотвратит странный эффект на стороне клиента.

2 голосов
/ 22 декабря 2009

В следующем стиле все изображения, использующие класс CSS «MaxSized», будут иметь максимальную высоту 100 пикселей и максимальную ширину 100 пикселей. Если изображение меньше, оно не будет растягиваться. 

<style>
IMG.MaxSized
{
max-width: 100px;
max-height: 100px;
}
</style>

Как упомянул Pekka, вам нужно иметь XHTML 1.0 Strict DTD, чтобы это работало в современных версиях IE, но я лично считаю, что это правильный подход.

0 голосов
/ 10 апреля 2017

Как указано в верхнем ответе, вы можете использовать max-height или max-width свойства CSS. Но эти свойства не ведут себя одинаково. Чтобы сохранить соотношение изображения, вы должны установить высоту и ширину на 100%, а затем установить max-width. Если вы установите max-height, соотношение не будет сохранено.

Итак: 

<img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>

сохраняет соотношение, но 

<img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>

нет. Это потому, что (насколько я понял) HTML сначала устанавливает ширину, а затем высоту. Таким образом, во втором случае ширина устанавливается на 100%, но высота ограничена, что может привести к искажению изображения. В первом случае ширина устанавливается с максимальным пределом, а высота регулируется соответствующим образом, что позволяет сохранить размеры изображения.

...