Поддержание соотношения сторон со 100% шириной и высотой (обрезка переполнения в CSS)

Я работаю над полноэкранным слайд-шоу.Поддержание соотношения сторон со 100% шириной и высотой (обрезка переполнения в CSS)

Мой вопрос: Как я могу установить изображение, чтобы охватить весь экран и поддерживать соотношение сторон?

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

Diagram of Problem

Я считаю, что мне нужно иметь один размер фиксирован, а другой авто; учитывая, что размеры изображения и размеры порта просмотра являются переменными, я думаю, мне понадобится хотя бы 2 набора правил CSS и javascript для расчета того, какой из них следует использовать. Есть ли более простой способ сделать это?

Я составил схему, иллюстрирующую мою проблему. Темные цвета - это оригинальные изображения. Медианные цвета - желаемый эффект. Более светлые цвета - это желаемое переполнение от увеличенного изображения.

Я работаю над полноэкранным эффектом эффекта Кен-Бернса. Я знаю, что мне нужно беспокоиться о переходах, но я надеюсь, что смогу справиться с этим после.

Учебник для Ken Burns Effect:
http://cssmojo.com/ken-burns-effect/

Решено: Спасибо Maju для введения меня второстепенной крышки. Изменение изображений на divs и изменение javascript + css в коде Ken Burns с изображений на divs хорошо работало. Сценарий меняет класс элемента, поэтому вам нужно использовать другой способ Maju или изменить скрипт.

источник

2016-08-23 Laxo

Использование 'min-height' и' min-width' должно фактически поддерживать соотношение, вы уверены, что у вас также нет 'width' или' height'? – Simon

@Simon Вы правы. Оказывается, у меня была высота, также установленная на авто. Когда я удаляю его, похоже, что он поддерживает соотношение, когда разрешение окна велико, но когда я делаю его узким, некоторые изображения по-прежнему растянуты по вертикали. Я буду продолжать проверять это. – Laxo

https://jsfiddle.net/464dewrz/1/ Похоже, что использование min-height и min-width действительно поддерживает соотношение. Я не уверен, что CSS противоречит этому. – Laxo

Если вы используете изображения в css background-image, вы можете установить любой элемент фона. И если я правильно Вас понял, что вам нужно что-то вроде:

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-repeat: no-repeat !important; 
 
    background-position: 0 0 !important; 
 
    background-attachment: fixed !important; 
 
    -webkit-background-size: cover !important; 
 
    -moz-background-size: cover !important; 
 
    -o-background-size: cover !important; 
 
    background-size: cover !important; 
 
}

<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>

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

Существует также новый стиль css, но он не работает в IE/ME.

https://css-tricks.com/almanac/properties/o/object-fit/

По этой причине я рекомендую использовать дивы с фона изображения.

источник

2016-08-23 21:37:04 Maju

Это сработало. Спасибо Маджу. – Laxo

Эй, я просто нашел различные решения, так как мне нужен img из-за SEO и фонового изображения не было для меня решением (новостные изображения).Наконец нашел что-то очень интересное: http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements В частности, решение 2 действительно помог мне решить большую проблему :) У вас может быть img с src, но видимым будет фоновое изображение. – Maju

Поддержание соотношения сторон со 100% шириной и высотой (обрезка переполнения в CSS)

ответ

Смежные вопросы