1
写真がある製品がある場所に簡単なレールアプリがありますが、新しい写真を追加するたびにサイズを変更できますそれをトリミングせずに画像：ruby on railsでRMagicを使って画像をカットせずに画像のサイズを適切に変更する方法
マイプロダクト・インデックス・ページ
<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;
}