我有一个简单的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>
我的产品模式
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
我的产品css
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;
}