Как мне сделать растяжение img до ширины контейнера, независимо от его высоты?

Question

.. ожидая, что изображение будет «обрезано» сверху и снизу. Я только хочу, чтобы он соответствовал ширине на 100%, и хочу, чтобы она была больше высоты, но не покидала определенный контейнер.

Как это сделать?

Answer 1

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

.container{
    width:300px;
    height:300px;
    overflow:hidden;
    display:block;}

.container img{
    width:100%;
    vertical-align:middle;
   }

Answer 2

Просто установите для свойства контейнера css overflow значение hidden, присвойте ему фиксированный размер, поместите изображение внутрь с фиксированной шириной и сделайте:)

Ну, почти готово. Чтобы обрезать его сверху и снизу, вам нужно расположить изображение вертикально по центру в рамке. Один из способов добиться этого - иметь крошечные текстовые узлы с обеих сторон изображения, имеющие line-height, равное высоте элемента контейнера. Предоставление изображения vertical-align:middle должно центрировать его вертикально внутри вашего div.