我正在设计一个博客，我正在使用 CarrierWave 和 MiniMagic 进行图像文件上传。截至目前，每篇文章的顶部都会显示一张图片。我首先尝试将图片大小调整为矩形，但似乎即使我在调整大小下更改尺寸，图片也始终显示为正方形。
现在，我正在尝试将文本包裹在图像周围。更具体地说，我希望图像显示在文章的左上角，文本显示在图像的右侧和图像下方：
-图像---- -----文字--------
- - - - -文本 - - - - - - -
这是我的文章索引视图：
<%= will_paginate %>
<% @articles.each do |article| %>
<div class="container1">
<h4><%= link_to article.title, article_path(article) %></h4>
<%= image_tag article.picture.url if article.picture? %>
<p>
<%= article.body %></p>
<p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small>
</p>
</div>
<br>
<br>
<% end %>
<%= will_paginate %>
<h6>
<% if logged_in? %>
<%= link_to "Create a New Article", new_article_path, class: "new_article" %>
<% end %>
</h6>
这是我的 CSS 样式：
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables */
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
position: relative;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #3BB9FF;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/*
footer{
background-color: #222;
div ul li{
display:block;
vertical-align: top;
width: 50%;
float: left;
}
}
*/
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
/* articles */
.container1 {
opacity: 0.75;
border: 1px solid #000000;
border-radius: 10px;
padding: 30px 75px 75px 100px;
overflow: scroll ;
}
.container2 {
position: fixed;
padding: 0px 75px 20px 100px;
clear: both;
background-color: #FFFFFF; /*#F8F8F8;*/
border-radius: 5px;
overflow: scroll;
}
这是我的文件上传器：
class PictureUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
# include CarrierWave::RMagick
# include CarrierWave::MiniMagick
# Choose what kind of storage to use for this uploader:
storage :file
# storage :fog
include CarrierWave::MiniMagick
process resize_to_limit: [660, 660]
if Rails.env.production?
storage :fog
else
storage :file
end
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# Provide a default URL as a default if there hasn't been a file uploaded:
# def default_url
# # For Rails 3.1+ asset pipeline compatibility:
# # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
#
# "/images/fallback/" + [version_name, "default.png"].compact.join('_')
# end
# Process files as they are uploaded:
# process :scale => [200, 300]
#
# def scale(width, height)
# # do something
# end
# Create different versions of your uploaded files:
# version :thumb do
# process :resize_to_fit => [50, 50]
# end
#Add a white list of extensions which are allowed to be uploaded.
#For images you might use something like this:
def extension_white_list
%w(jpg jpeg gif png)
end
#Override the filename of the uploaded files:
# Avoid using model.id or version_name here, see uploader/store.rb for details.
# def filename
#"something.jpg" if original_filename
#end
end.
如何让图像位于页面的左上角，文本位于页面的右上角、左下角和右下角，以便文本环绕图像？是否可以调整矩形图像的大小？我该如何使用 CarrierWave 做到这一点？
