CSS или jQuery на рельсах / Как «заполнить рамку» изображением?

Question

Каков наилучший метод для создания чего-то вроде «заливки рамки» в indesign ... то есть взять изображение и масштабировать самую короткую сторону, чтобы оно уместилось, а затем обрезать остальные?

Возможно ли это с чистым CSS?

Я использую Rails с jQuery ..

Код может быть примерно таким:

<div class="image_container"><img class="image" src=""></div>

Answer 1

Вы можете сделать это, если у вас был фиксированный размер image_container:

.image_container{
  width:200px;
  height:100px;
  overflow:hidden;
}

.image_container img{width:200px;}

Это позволит масштабировать изображение по ширине и скрывать по высоте.

Answer 2

Это предполагает, что изображение длиннее по высоте, чем по ширине.В нем будет пустое место для пейзажных изображений.