Как ресайзить изображения без потери пропорций?

Question

[Miku Hatsune]

Есть сетка, в ячейке каждой строки вставлено изображение, задача состоит в том, что бы изображения были одного размера и не растягивали свой блок.

Но изображения все рандомного размера и ориентации. Как без потери пропорций приводить их всех к одному размеру?

Буду рад увидеть ссылки на какие либо готовые примеры. Спасибо.

Answer 1

[Ivan Bogachev]

Почитайте про свойство object-fit - оно как раз должно решить ваш вопрос. Правда если нужны старые браузеры и ie - придется подставлять полифилл.

Answer 2

[Богдан]

Вот может так нужно
SLIM

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    link rel="stylesheet" href="table_image.css" 
  body
    table
      tr
        td 
          .img *{ style: "background-image: url('http://lorempixel.com/100/200/');" }
        td 
          .img *{ style: "background-image: url('http://lorempixel.com/100/300/');" }

CSS

.img {
  height: 100px;
  width: 100px;
  background-repeat:no-repeat;
  background-size: 100% 100% / contain;
}

Результат