Fatal编程技术网
  • css/
  • Css 如何在RubyonRails中使用RMagic正确调整图像大小而不剪切图像

Css 如何在RubyonRails中使用RMagic正确调整图像大小而不剪切图像

css ruby-on-rails image

Css 如何在RubyonRails中使用RMagic正确调整图像大小而不剪切图像,css,ruby-on-rails,image,rmagick,Css,Ruby On Rails,Image,Rmagick,我有一个简单的rails应用程序，其中列出了带有照片的产品，但每当我添加一张新照片时，它都会被裁剪，有没有办法在不裁剪的情况下调整图像的大小： 我的产品索引页 <head> <link href="/assets/bootstrap.min.css" rel="stylesheet"> <link href="/assets/font-awesome.min.css" rel="stylesheet"> <link href="/

我有一个简单的rails应用程序，其中列出了带有照片的产品，但每当我添加一张新照片时，它都会被裁剪，有没有办法在不裁剪的情况下调整图像的大小：

我的产品索引页

<head>
    <link href="/assets/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/font-awesome.min.css" rel="stylesheet">
    <link href="/assets/products.css" rel="stylesheet">
</head>
<a class="btn btn-info btn-sm" href="#success" data-toggle="modal"><h4><i class="fa fa-shopping-cart"></i></h4></a>
<body>
<div class="container-fluid">
  <div class="text-center">
    <h1>Store Of The Champions</h1>
  </div>
<p id="notice"><%= notice %></p>
<% @products.each do |product| %>
<div class="wrap ">
       <h1><%= product.name %></h1>
       <div class="imagesize" >
       <h6><%= image_tag product.image.url(:medium)%></h6>
     </div>
       <p>Description: <%= product.description %></p>
        <p>Size: <%= product.size %></p>
        <p>Avaliable Colours: <%= product.colour %></p> 
        <div class="text-center">
       <h6>₹ <%= product.price %></h6>
      </div>
    </div>
  <% end %>
</div>
    <!-- Modal -->
    <div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header modal-header-success">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h1><i class="fa fa-shopping-cart"></i> How to order?</h1>
                </div>
                <div class="modal-body">
                  To order any product just call us @ +919038215052
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </body>
基于，可能尝试
1280x720>
而不是
1280x720

基于，可能尝试
1280x720>
而不是
1280x720

class Product < ActiveRecord::Base
    belongs_to :user
    has_attached_file :image, styles: { medium: "1280x720#" }, :default_url => "missing.jpg"
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\Z/
end

body {
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center;
}
.wrap {
    background: #fff;
    margin: 20px auto;
    display: block;
    width: 300px;
    height: 380px;
    padding:20px;
    border-radius: 2px 2px 2px 2px; 
    -webkit-box-shadow: 0 1px 4px 
    rgba(0, 0, 0, 0.3), 0 0 40px 
    rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px 
    rgba(0, 0, 0, 0.3), 0 0 40px 
    rgba(0, 0, 0, 0.1) inset;
    float: left;
    margin-right: 29px;
}

.wrap img {
    width: 100%;
    margin-top: 15px;
}

p{ 
    margin-top: 15px;
    text-align: justify;
}

h1{
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

a{
    text-decoration: none;
    color: #4A4A4A !important;
}

a:hover{
    text-decoration: underline;
    color: #6B6B6B !important ;
}

.imagesize {
  max-width: 1280px;
  max-height: 1280px;
}