將圖像調整爲更小尺寸

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