Изменить размер или масштабировать изображения, изменяя соотношение сторон без растяжения?

Я хочу разработать дизайн веб-сайта.

У меня есть несколько изображений с разным w*h.

Например, у нас много картинок с разрешением 800*600 или 1024*768 или что-то еще.

На нашем веб-сайте у нас есть некоторые ограничения, такие как 270 * 160 или 512 * 900. Мы хотим масштабировать или изменять размеры основных изображений с ограниченным размером кадра.

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

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

Ответы (3)

Проще говоря.. Вы не можете .

Если вы хотите изменить общее соотношение сторон изображения, вы должны обрезать, растянуть, сжать или замаскировать (маскирование может быть осуществимо в Интернете, хотя это приведет к обрезке). Это ваши единственные варианты.

О скольких изображениях мы говорим? Если их немного, вы можете сделать это вручную. Выясните размер кадра, создайте новый пустой файл такого размера, затем откройте исходное изображение. Уменьшите размер вашего изображения, чтобы либо высота соответствовала вашей рамке, либо ширина соответствовала (в зависимости от того, какая из них меньше), затем вырежьте и вставьте это изображение в пустое изображение «рамки». Затем вы можете переместить изображение, чтобы выяснить, где вы хотите его обрезать, а затем сохранить его как изображение «обрезанного кадра». Повторить.

Если мы говорим о сотнях фотографий, вы, вероятно, захотите использовать программное обеспечение для автоматизации этого процесса.

В качестве альтернативы вы можете сделать это исключительно с помощью CSS, если изображения не слишком большие с точки зрения скорости загрузки. Используйте ту же логику, что и выше, где у вас есть divразмер до нужного размера кадра, а затем изображение в качестве фонового изображения. Вам понадобится немного JS, чтобы определить, следует ли масштабировать изображение в зависимости от его ширины и высоты.

Когда вы перетаскиваете изображение в фотошоп, щелкните правой кнопкой мыши слой, и вы найдете «преобразовать в смарт-объект». Так что ваше изображение не будет растягиваться или если вы измените размер, оно также не будет пиксельным.