Ответ 1
Обновленный ответ (чистый CSS3)
Для экстремальных требований иногда требуются экстремальные решения. Я основывался на своем первоначальном ответе (см. ниже), чтобы создать чистое css-решение, которое работает (и может быть сделано для лучшей работы, если вы хотите инвестировать время в нем). текущий пример является немного "изменчивым" в рендеринге, что может быть хорошо для вас, но если нет, вам нужно будет расширить уже непристойное количество @media запросов, которые его приводят (его было бы намного проще реализовать с помощью LESS или SASS; я собрал таблицу Excel, ориентированную на форму, чтобы помочь быстро генерировать числа), Он использует этот код:
HTML
<div class="box">
<img src="yourImage.jpg" />
</div>
CSS
.box{
height:300px;
min-width: 100px; /*could be different, but you ought to have some min*/
overflow:hidden;
}
.box img {
height: 100%;
width: 100%;
-ms-transform-origin: 100% 100%; /* IE 9 */
-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
-moz-transform-origin: 100% 100%; /* Firefox */
-o-transform-origin: 100% 100%; /* Opera */
transform-origin: 100% 100%;
}
/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width: 100px) {
.box {
-ms-transform:skewY(45deg);
-moz-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
-o-transform:skewY(45deg);
transform:skewY(45deg);
}
.box img {
-ms-transform:skewY(-90deg);
-moz-transform:skewY(-90deg);
-webkit-transform:skewY(-90deg);
-o-transform:skewY(-90deg);
transform:skewY(-90deg);
}
}
Здесь, как рассчитать градусы
Предполагая height: 300px с узкой стороной приблизительно 100px высоких и равных углов на трапеции. Это означает, что верхнее и нижнее смещение (300px - 100px) / 2 = 100px. Затем углы .box устанавливаются с помощью @media запросов min-width в соответствии с этой формулой:
Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/
Для угла .box img возьмите Angle и умножьте на -2. Таким образом, вы получите ваши запросы .box и .box img и преобразуются как этот псевдокод:
@media screen and (min-width: [your target min-width]) {
.box {transform: skewY(Angle)}
.box img {transform: skewY(-2*Angle)}
}
Насколько он сглажен, полностью зависит от того, как микромасштабирование вы вносите изменения в min-width, чтобы получить новую настройку угла. Как я уже сказал в своем комментарии в коде CSS выше, мой пример использует 51 вызов медиа-запросов и по-прежнему имеет некоторую неловкость.
Было бы лучше использовать некоторое javascript-решение вместо... возможно, но это полностью зависит от дизайнера, поэтому я предлагаю это здесь как чисто доказательство концепции, что его можно заставить работать с чистым css.
Оригинальный ответ
Это, по-видимому, достигает ширины жидкости. Я не знаю, сколько контроля вы хотите от того, сколько или какой части изображение отображается, поэтому оно может не соответствовать вашим потребностям, но оно делает гибкое изображение ширины с помощью преобразований, чтобы придать ему фальшивый вид перспективы.