Rails Image Re-sizing на экране просмотра?

Как изменить размер существующего изображения, скажем, "260x180?"

Я использую Carrierwave и Rmagick в настоящее время для загрузки изображений в мое хранилище Amazon S3, и он создает 2 версии изображения: оригинал и большую версию (70x70).

Теперь я знаю, что я могу создать другую версию, чтобы были созданы три версии, включая 260x180, но я чувствовал, что это забивает базу данных хранилища, и мне было интересно, могу ли я сделать это на виду уровень.

Я пробовал

<%= image_tag(@syllabus.image_url, :size => "260x180") %>

но похоже, что он не работает - изображения не одинаковые.

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

Ответы

Ответ 1

Как @Yosep сказал, здесь нет ничего волшебного из рельсов. <%= image_tag %> генерирует тег <img> в результате html. если вы передадите :size => '260x180', тег <img> результата будет иметь свои значения width и height равными 260 и 180.

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

Изменение размера изображения путем установки ширины и высоты тега <img> не приведет к сохранению исходного формата изображения. если исходное соотношение составляет 260: 180, то это нормально. Но если нет, результат будет уродлив. Кроме того, есть еще один недостаток этого, который по той же причине не должен изменять размер изображения с помощью CSS. Изменение размера больших изображений на более мелкие на стороне клиента в конечном итоге будет огромной тратой вашей сети, и это замедлит работу вашего сайта. Это один из правил YSlow.

Чтобы изменить размер изображения с помощью CSS, вы можете использовать max-width и max-height, размер больших изображений будет соответствующим образом изменен, меньшие будут не изменены.

Ответ 2

Все Rails при просмотре кода обращаются к

<%= image_tag(@syllabus.image_url, :size => "260x180") %>

во что-то вроде

<image tag="image.jpg" width="260" height="190" ../>

на странице (HTML).

Тем не менее, если ваш код не похож на работу, попробуйте присвоить ему класс CSS:

.image-size {
  max-width: 300px;
  max-height: 200px;
}

Ответ 3

В представлении, без обработки нового изображения? По соглашению, вы бы использовали CSS.

.image_container img {
  width: 260px;
  height: 180px
}

И вот несколько интересных способов обрезать CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Ответ 4

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

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %>

В этом сообщении говорится о том, как использовать CarrierWave, пока все изображения хранятся в облаке, передаются через быстрый CDN, и все преобразования динамически выполняются в облаке (нет необходимости устанавливать RMagick).