Описание тега object-fit
Свойство CSS object-fit указывает, как содержимое заменяемого элемента должно соответствовать полю, установленному его используемой высотой и шириной.
2
ответа
Div поддерживает исходный размер изображения без растяжения / переполнения
У меня есть HTML-страница, как это: <html> <head> <style> .main { max-width:500px; min-height:500px; margin:auto; } .image-container { width:100%; background-color:black; min-height: 200px; height:300px; } img { object-fit: contain…
06 сен '18 в 07:33
0
ответов
Как мне настроить объект для работы в Microsoft Edge 16 (EDGEHTML16)?
Я использую объектную посадку, чтобы успешно изменить масштаб HTML5-холста с помощью Chrome и Firefox. Согласно документу Microsoft, подгонка объектов поддерживается в EDGEHTML16 (поставляется с Edge 16 как часть обновления Windows 10 Fall Creators)…
22 окт '17 в 19:35
0
ответов
Альтернатива подгонки видео тегов
Мне нужно реализовать видео, которое заполняет контейнер. Требуется использовать чистый CSS вместо использования Javascript. Я просмотрел Интернет и пришел к выводу, что есть два подхода к решению этой проблемы, но у них все еще есть свои недостатки…
15 фев '19 в 03:30
2
ответа
Странный пробел в нижней части HTML-видеоэлемента при использовании object-fit: cover;
В некоторых случаях, когда один из родительских элементов в HTML имеет margin из padding определяется внизу или вверху, случится так, что ваш video объект не может растянуть исходный носитель в полной мере внутри себя. Даже если вы определите object…
18 апр '18 в 19:09
3
ответа
Bootstrap Carousel и тэг <img> с не подходящими объектами и позицией объекта
У меня есть следующая карусель: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> ... </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class=…
03 сен '18 в 15:51
1
ответ
Альтернатива background-size: обложка для тегов img?
Я пытаюсь сделать <img> заполнять его обертку целиком все время, не растягивая и не изменяя пропорции изображения. Видеть как object-fit не работает для IE/Edge без полизаполнений, охватывает ли это решение все крайние случаи? .image-wrapper {…
02 май '18 в 21:21
0
ответов
Принудительное вертикальное переполнение вверх - HTML / CSS
У меня есть видео, которое я установил для размещения объекта внутри div. Это работает нормально, но когда я использую это свойство, оно меняет поведение элемента-брата. По сути, когда я уменьшаю размер окна, а текстовое поле родственного элемента у…
26 янв '18 в 15:22
0
ответов
Flexbox (столбец) переполняется, когда не оборачивается в ребро (только)
Я пытался сделать галерею, которая использует flexbox как таковой: Пример изображения Но проблема в том, что в крае оно переполняется; пока это не в Firefox, Chrome или даже Internet Explorer. Я сделал здесь подарок, чтобы объяснить желаемый эффект:…
15 мар '18 в 22:45
1
ответ
Можем ли мы создать что-то вроде Object-fit: заполните Javascript/Jquery
Я использую объектную посадку для видео. Я видел, что не работает в IE и некоторых других браузерах. Можно ли создать что-то вроде Object-fit: fill работает с Javascript/Jquery?
22 авг '17 в 20:21
1
ответ
CSS объект подгоняет обложку растягивая изображение
Положение объекта CSS fill, contain работают но cover работает как fill, Он должен заполнять div без растяжения, независимо от того, какая часть изображения будет cover, Я установил для div flex и применить object fit position к изображениям, которы…
18 июн '18 в 06:14
2
ответа
Подгонка объекта: заполнить; не работает
Я написал этот отзывчивый код галереи изображений с использованием flexbox Я установил фоновый стиль каждого flexbox_item на голубой, чтобы показать размеры каждого блока flexbox_item: background-color: cyan; Теперь я хочу, чтобы изображения заполня…
19 апр '18 в 14:29
2
ответа
Использование подгонки объекта в <div> с дочерними элементами, включая <canvas>
У меня есть внешний контейнер, который имеет переменный размер и ширину. Предположим, что внутри этого контейнера у меня есть холст, который я хочу вырастить настолько, насколько это возможно, сохраняя пропорции, а не обрезку. Для этого я бы обычно …
04 окт '16 в 18:15
1
ответ
Подгонка объекта: Обложка и Srcset
Я использую object-fit: cover на кучу изображений. Рамка для изображения занимает 50vw и имеет динамическую высоту. Атрибут cover работает отлично, но это означает, что я не знаю, насколько широким будет мое фактическое изображение в данный момент в…
24 июн '15 в 20:09
0
ответов
Подходит ли объект: подходит ли рекомендуемый метод для настройки полноэкранного фонового видео?
У меня есть два способа настройки полноэкранного фонового видео для веб-сайта. Ниже приведены демонстрационные примеры для обоих методов: Метод № 1: https://codepen.io/irfan-dayan/pen/MqYaMd HTML: <!DOCTYPE html> <html lang="en"> <bod…
21 авг '18 в 14:57
1
ответ
Резервное решение для подгонки объекта на flexslider
Я использую flexslider (фиксированная высота 500px), но немного изменил его, чтобы позволить изображениям отображаться красиво, даже если они имеют высоту более 500px. Поэтому я добавил подгонка объекта: крышка; положение объекта: центр; в CSS из im…
17 янв '17 в 09:04
1
ответ
Применить объектную подгонку к элементу с Typescript в Angular 2
Я пытаюсь использовать объектную посадку для элемента в моем приложении. Моя IDE не распознает это: child.style.objectFit = 'cover'; По какой-то причине. У него есть волнистые линии под objectFit. И когда я делаю это: child.style.setProperty ('objec…
26 июн '17 в 14:41
1
ответ
Установить свойство css object-position программно
Я использую свойства css object-fit и object-position для управления размещением изображения в css. Я хочу программно установить эту позицию с помощью JavaScript. Я старался: const panPos = 50; document.querySelector('.image').style.objectPosition =…
26 янв '18 в 00:06
1
ответ
Ограничить максимальную высоту изображения, которая зависит от высоты его брата
Как я могу ограничить максимальную высоту изображения, чтобы оно было таким же, как высота его брата, независимо от размера экрана. Результат, который является приемлемым => Та же высота - √ Результат, который неприемлем, так как высота столбца изоб…
28 ноя '18 в 19:47
0
ответов
Какие есть несколько способов отобразить div и изображение рядом друг с другом и поддерживать одинаковую высоту?
.container { display: flex } .image { max-width: 100%; height: 100% } .videotext { padding: 50px; color: white; align-text: center; background-color: blue; width: 50%; max-width: 100%; } img { width: 100%; vertical-align: top; object-fit: contain; …
02 май '18 в 04:06
0
ответов
iOS игнорирует атрибуты playsinline html5 video
Сайт : http://ijj.425.myftpupload.com/ так что все работает идеально, пока не дойдет до iOS. когда вы нажмете кнопку воспроизведения здесь, откроется новое окно плеера (полный экран). как я могу избежать этого? Какие-нибудь мысли? может быть, атрибу…
26 янв '19 в 16:48