css - Rails - 如何使用 Cloudinary 从多个服务器获得相同的图像大小(分辨率)

标签 css ruby-on-rails twitter-bootstrap ruby-on-rails-5 cloudinary

我有一个搜索页面结果来 self 的应用程序中的抓取内容,每个结果都有来自外部 URL 的图像。

我在寻找什么:每个图像的大小完全相同,并将每个图像放在 Bootstrap 网格系统中。

<%= cl_image_tag product.link, :gravity=>"auto:0", :crop=>"scale", class: "img-responsive" %>

HTML 渲染:

<img src="https:site.com.image.jpg?sw=1920&amp;sh=950&amp;sm=fit">

图像从来没有相同的格式,例如:

  • 1920 x 950 像素
  • 1080 x 1514 像素
  • 1860 x 2790 像素

我使用的是 Bootstrap 网格系统,因此图像必须适合 div.col-xs-3 网格系统。

我的测试结果很丑,从不给出相同的格式,质量被弃用... 我尝试使用 cl_image_tag 助手从 Cloudinary 调整大小,但它总是很难看。

非常感谢

最佳答案

您是否尝试按照此处的 3 个步骤操作:https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript

添加库 (cloudinary-core-shrinkwrap.js) 后,您可以只使用 width auto。例如: cl_image_tag("smiling_man.jpg", :width => :auto, :crop => :scale, :responsive => :true, :responsive_placeholder => "空白")

关于css - Rails - 如何使用 Cloudinary 从多个服务器获得相同的图像大小(分辨率),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53707733/

相关文章:

css - map.get($foo, bar) 标记为 "semi-colon expectedscss(css-semicolonexpected)"

css - 按钮将字体大小更改为某些未指定的

ruby-on-rails - 在 "rails s"中出现错误,服务器未运行

php - Bootstrap 下拉菜单从 MySQL 中选择

javascript - 检索 Bootstrap 轮播中的隐藏值

javascript - 如何使用 Angular 突出显示指向当前页面的链接?

JavaScript获取数据属性多个div

mysql - 在什么情况下您希望 Rails 设置为不重新连接到 MYSQL

ruby-on-rails - Rails 嵌套模型形式 : validate presence of foreign key unless user creates new record

css - 早午餐不通过 bower.js 引入 Bootstrap