Question

我允许用户添加图像并渲染图像，以便用户可以看到他们上传的内容。我有一个porfolio_photo和location_photo。但是，我无法在上传照片时将照片调整得更小。我该怎么做呢？我遵循stackoverflow用户的建议，在css中为portfolio_photo放置宽度：200px，但它没有提升？谢谢

custom.css.scss

.sized {
    width: 200px;
}

应用程序/视图/设计/注册/编辑

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="user-profile">
            <div class="profile-highlight text-center"><h1 class="pad-header">Update</h1></div>
        <div class="user-info">
          <h2>Update <%= resource_name.to_s.humanize %> Information</h2>

            <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, multipart: true }) do |f| %>

            <%= devise_error_messages! %>

            <br>

            <%= f.label :email %>
            <%= f.text_field :email, class: "form-control" %>

            <br>

            <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
             <p>Currently waiting confirmation for: <%= resource.unconfirmed_email %></p>
            <% end %>

          <%= f.label :address, "Enter your address (it will NOT be displayed publicly)" %>
          <%= f.text_field :address, class: "form-control" %>

          <br>

          <div class="row">
            <div class="col-md-4">
              <%= f.label :city %>
              <%= f.text_field :city, class: "form-control" %>
            </div>
            <div class="col-md-4">
              <%= f.label :country %>
              <%= f.text_field :country, autocomplete: "off",  class: "form-control" %>
            </div>
            <br>
          </div>

            <br>
            <br>
            <p><b>Upload pictures of previous projects or work you have done</b></p>

             <div class="sized">
             <%= image_tag @user.portfolio_photo  %>           
            </div>               
            <%= f.file_field :portfolio_photo, multiple: true, name: "user[portfolio_photo]" %>     

            <br>
            <br>

          <p><b>Upload a picture of your mindmeetup location</b></p>

          <%= image_tag @user.location_photo %>

         <%= f.file_field :location_photo, multiple: true, name: "user[location_photo]"  %>
       </div>
     </div>

          <br>

         <div class="text-center"><%= f.submit class: "btn btn-primary btn-lg" %></div>

Answer 1

鉴于您的代码只包含html和css，我假设您只想设置相关图片的CSS宽度。只需设置width或height属性即可，但不能同时设置两者。

http://jsfiddle.net/m1ocvsbq/

.sized {
    width: 200px;
}

将图像调整为较小的尺寸

1 个答案: