1
Ich habe eine einfache Schienen App, wo Produkte mit dort Foto aufgeführt sind, aber jedes Mal wenn ich ein neues Foto hinzufüge es abgeschnitten, gibt es eine Möglichkeit, die Größe zu ändern Bilder, ohne es zu beschneiden:wie man das Bild richtig skaliert, ohne das Bild mit RMagic in Ruby auf Schienen zu schneiden
Mein Produkt Index Seite
<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>
mein Produkt modal
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
mein Produkt 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;
}