CSS для унифицированного размера миниатюр

Question

У меня есть картинки для изображений, которые находятся в разных пропорциях и размерах. Это приложение на рынке, поэтому продавцы будут загружать изображения разных размеров. Я хочу изменить размер, чтобы они соответствовали сетке эскизов, которые у меня есть.

Нижеследующий css выполняет работу по большей части. Но изображения выравниваются по высоте. Я хочу, чтобы они были выровнены по нижнему или среднему. vertical-align не работает по какой-либо причине.

См. Второй пункт на демонстрационном сайте mktdemo.outfitadditions.com.

Есть ли лучший способ сделать это? Я тоже пробовал некоторые JS-плагины, но они не работали правильно.

Я хочу, чтобы css был отзывчивым. Я использую Paperclip для изменения размеров изображений на 200x200, то есть самый большой размер в формате, который подходит в пределах 200x200. Поэтому, если изображение имеет размер в ландшафте, ширина меньше высоты, которая отбрасывает вещи. Вот почему css ниже.

.thumbnail { 
    display: block; 
    width: 100%; 
    position: relative; 
    height: 0; 
    padding: 80% 0 0 0; 
    overflow: hidden; 
    border: none; 
} 

.thumbnail img 
{ 
    position: absolute; 
    display: block; 
    max-width: 100%; 
    max-height: 100%; 
    left: 0; 
    right: 0; 
    top: 3px; 
    bottom: 5px; 
} 

.caption { 

    h3 { 
    font-size: 15px; 
    margin: 2px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    } 

    p { 
    font-size: 13px; 
    margin: 4px; 
    } 

position: relative; 
top: -7px; 
padding: 3px; 
background-color: #f0f0f0; 

} 

мой html.erb:

<div class="center"> 
    <div class="row"> 
    <% @listings.each do |listing| %> 
    <div class="col-md-3 col-sm-3 col-xs-6"> 
     <div class="thumbnail" > 
      <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive"), listing, data: { no_turbolink: true } %> 
     </div> 
     <div class="caption"> 
      <h3><%= link_to listing.name.downcase.titleize, listing, data: { no_turbolink: true } %></h3> 
      <p><%= number_to_currency(listing.price) %></p> 
     </div> 
    </div> 
    <% end %> 
    </div> 
<p><%= will_paginate @listings, renderer: BootstrapPagination::Rails %></p> 
</div> 

мой код модели с параметрами скрепка/ImageMagick.

has_attached_file :image, 
        :styles => { :medium => "200x200>", :thumb => "100x100>" } 

Answer 1

Если вы используете paperclip, то вы можете сделать это во время генерации миниатюр. Поскольку он использует изображение-магия для всех манипуляций с изображениями. У Image-magick есть много вариантов манипуляции с изображениями. Ниже код предназначен для изображения с прозрачным фоном. Он автоматически добавляет прозрачный фон, если соотношение сторон не похоже на желаемое.

has_attached_file :logo, 
    :default_url => "/images/no-logo.png", 
    :styles => {:thumb => ['100x100>', :png]}, 
    :convert_options => {:thumb => '-size 100x100 xc:transparent +swap -gravity center -composite'}, 
    :storage => :s3, 
    :s3_credentials => { 
    :access_key_id => XXXXX, 
    :secret_access_key => XXXXXXX 
    }, 
    :path => ":attachment/:id.:extension" 

Вы также можете обрезать его от центра, если вы хотите, как это:

has_attached_file :image, 
    styles: { 
    thumb: '100x100^', 
    medium: '200x200^' 
    }, 
    convert_options: { 
    thumb: " -gravity center -crop '100x100+0+0'", 
    medium: " -gravity center -crop '200x200+0+0'" 
    }, 

Answer 2

CSS

Относительно простое исправление (кроме ImageMagick вариантов, подробно описанным Nitin Verma), является для создания «обертки» CSS, в которую вы можете поместить изображение. Эта оболочка/контейнер может быть отзывчивым, и работает, чтобы дать свою высоту изображения или ширину, скрывая остальные:

JSFiddle

<div class="thumbnail"> 
    <%= image_tag "your_image.png" %> 
</div> 

#css 
.thumbnail { 
    display: block; 
    overflow: hidden; 
    height: 200px; 
    width: 200px; 
} 

.thumbnail img { 
    display: block; 
    height: 100%; 
} 

Вы можете стилизовать изображение высота/ширина через .thumbnail класса. Это даст вам возможность определить размер изображения, которое у вас есть.

Мы склонны использовать этот метод для стайлинг и размер ImageMagick для создания меньших изображений. Вы должны помнить, что вы никогда не получите такие же пропорции, как изображения, и поэтому вы должны быть в состоянии дать лучший стиль, независимо от их размера.

CSS-выше будет делать это, в то время как ImageMagick предоставит вам возможность создать менее resoluton изображения, делая процесс рендеринга более эффективным