Изменение размера изображения с ограничениями высоты / ширины и постоянным соотношением

Question

Я хочу вставить изображение на веб-страницу, и я хочу, чтобы оно помещалось в пространство размером 120 * 40. Проблема в том, что оригинальные изображения могут иметь любой размер (400 * 40, 30 * 220 и т. Д.) поэтому, если я установлю атрибут высоты на 40, я могу оказаться с изображениями шириной более 120. То же самое происходит, если я установил ширину в 120 пикселей. Если я установлю ширину на 120 и высоту на 40, то это хорошо, но оригинальное соотношение будет потеряно, и я не хочу этого.

Что бы вы предложили?
Получите исходные свойства изображения в javascript, а затем установите одно из них (шириной 120 или высотой 40), чтобы другое соответствовало 120 * 40? На одной странице много таких изображений, поэтому я думаю, что этот метод немного тяжелый ...

PHP решение:

    <?php
list($width, $height, $type, $attr) = getimagesize($image);
        if($width/$height>3)
            $height *= 120/$width;
        else 
            $height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>

см. Ниже для решения javascript и решения CSS

Answer 1

css max-width и max-height - это то, что вам нужно.

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

РЕДАКТИРОВАТЬ: Я сказал об этом в комментарии, но установка обоих этих свойств работает в моих тестах.Он сохраняет соотношение и изменяет размеры до предела, который он достигает первым.Не устанавливайте свойства width или height, это может вызвать проблемы

Answer 2

Я действительно искал ответ на другой запрос, но наткнулся на ваш.

Я использую это для изменения размера изображений, которые, как я нахожу, очень удобны в ряде моих сценариев, но я хотел бы предложить, чтобы вы изменили размер изображения, чтобы он был немного больше самого длинногосторона контейнера, а затем используйте css для центрирования изображения по горизонтали и вертикали и установите для контейнера значение overflow:hidden;

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

Надеюсь, что это поможет вам или кому-то еще попробовать что-то подобное.

Answer 3

JavaScript довольно быстрый, так почему бы не попробовать его?

Я бы просто выбрал соотношение сторон и добавил несколько проверок:

var width = image.width;
var height = image.height;
var ratio = width / height;

if (width > 120) {
  width = 120;
  height = 120 * ratio;
} else if (height > 80) {
  height = 80;
  width = 80 * ratio;
}

image.width = width + 'px';
image.height = height + 'px';

---

Поскольку вы, похоже, используете PHP, ImageMagick может изменить размер изображения, чтобы оно поместилось внутри предопределенного блока. Я знаю только, как это сделать через CLI, так как я не использую PHP, но держу пари, что код PHP будет простым.