将图像调整为更小尺寸

Question

我允许用户添加图像并呈现图像，以便用户可以看到他们上传的内容。我有一个porfolio_photo和一个location_photo。不过，我似乎无法在上传时将照片缩小尺寸。我会怎么做呢？我跟着一个stackoverflow用户的建议把宽度：200px的portfolio_photo在CSS但它不拾起？由于

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; 
}