Изменение размера изображений до меньшего размера

Question

Я разрешаю пользователям добавлять изображение и отображать изображение, чтобы пользователи могли видеть, что они загрузили. У меня есть porfolio_photo и location_photo. Тем не менее, я не могу заставить фотографии уменьшать размер при загрузке. Как мне это сделать? Я последовал за предложением пользователя stackoverflow поставить ширину: 200px для портфолио_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; 
}