ows.nightwolf

Если не требуется пооддержка старых браузеров (ie9-) то может быть очень удобно использовать css grid ( https://css-tricks.com/snippets/css/complete-guide-grid/ ), там можно задать сетку, и потом в зависимости от разрешения экрана располагать в ней элементы интерфейса в нужные позиции.

Мое мнение - если не надо поддерживать ie8 то лучший вариант использовать inline svg (тот который прямо в разметку в тег svg вставляется). Это даст возможность рисовать объекты произвольной формы, и одновременно с этим работать с ними в отдельности как с самостоятельными DOM элементами (заливку менять, например).

Согласен, это решает проблему неизвестных исходных размеров изображения. К сожалению у объекта image (который находится внутри SVG) нет возможности получить оригинальный размер при загрузке, так что надо будет "костыльнуть" и на событии onLoad создавать нативный HTMLImage, сетить в него src такой же как у image внутри svg, и уже на нем по onload смотреть оригинальные размеры. Получится что-то типа такого: https://codepen.io/ows_nightwolf/pen/KxXzyL

Я написал что нельзя использовать js т.к. насколько я понимаю все решения сводились бы к чтению размеров изображения, сравнения их с размерами контейнера, высчитыванием правильных размеров с учетом масштабирования и назначения этих размеров (в пикселях я полагаю) контейнеру. Такие решения будут работать "в моменте" но рано или поздно потребуют костылей для того чтоб работать например при изменении размеров окна (типа надо вешаться на window.onresize и пересчитывать все при ресайзе), и их производительность хуже чем решения на чистом CSS. Ну а PHP не подходит потому что сервер вообще на classic ASP (не спрашивайте, заказчик упрям как обычно), а у нас что-то типа single-page application и разметку мы гереним на клиенте. Но в моем решении я конечно исользую js чтоб сформировать svg контейнер как вы сказали, но это делается только один раз в начале и работает в любых условиях в дальнейшем, так что такое решение в теории не приведет к доп. работам в будущем.

Спасибо всем за ответы, @Switch74: object-fit действительно вписывает картинку в контейнер, но сам контейнер не принимает ее размеров, так что это только частично решает задачу. @AlexZaw: Фиксирвано том смысле что размеры не равны auto или еще чему-то абстрактному (что может "сломать" свойства типа min-width или min-height, если они заданы в %), там четко заданы размеры в % или px. А меняться могут под действием различных media query. В любом случае, похоже что AlexZaw прав, и при заданных условиях решить задачу на чистом HTML и CSS невозможно, помечу его ответ как лучший. Тем не менее для задачи на реальном проекте (описана в разделе "доп информация" этого поста) я нашел решение проблемы - использовать SVG в качестве контейнера картинки, а саму картинку внутри этого svg вставлять через тег image. Вот так: https://codepen.io/ows_nightwolf/pen/Mqvoab . Эффект от этого подхода очень схож с эффектом от использования object-fit, который был предложен Switch74, в том плане что изображение будет вписано в контейнер, но сам контейнер (SVG элемент) не будет иметь те же размеры что и изображение. Но тем не менее есть два отличия: Он лучше поддерживается браузерами (IE9+, в то время как object-fit поддерживается только IE Edge) Есть возможность вставлять различные элементы "в пределах" размеров исходного изображения (вставлять их внутрь SVG, в моем примере я вставил красный прозрачный прямоугольник для иллюстрации), при этом они будут отображаться правильно вне зависимости от масштаба изображения. Но у подхода есть один минус, который существенно огриничивает его применение: для того чтоб все работало правильно нужно изначально знать исходные размеры изображения. UPD.: Согласно предложенному Switch74 решению можно узначать исходные размеры изображения после его загрузки, и согласно им обновить значения width и height у image, а так же width, height и viewBox у svg. Получится что-то типа такого: https://codepen.io/ows_nightwolf/pen/KxXzyL

Доброго времени суток, прошу помощи в решении задачи. Пример (как должно быть): На данном рисунке: Есть общий контейнер (зеленый прямоугольник), чьи размеры (и ширина и высота) заданы фиксированно (но эти величины заранее не известны + при изменении размеров окна браузера могут меняться) Внутри общего контейнера лежит контейнер изображения (красный прямоугольник). Ну и есть само изображение, о котором не известно вообще ничего. Суть задачи: изображение должно масштабироваться сохраняя свои пропорции так, чтобы занимать всю высоту или ширину зеленого контейнера (быть вписанным в зеленый контейнер), при этом красный контейнер должен иметь размеры в точности такие как само изображение (облегать его). Задача должна быть решена на чистом CSS + HTML. Доп информация: Эта информация имеет косвенное отношение к задаче, и я ее тут предоставил просто чтобы дать больше информации о контексте применения решения если оно найдется. Многое из того что тут описано я не включал в пример задачи чтобы не усложнять ее. Мои наработки: Пока что наиболее близкого поведения я смог добиться только таким способом: https://codepen.io/ows_nightwolf/pen/yxoYBa Но тут изображение не может вырасти больше своего реального размера, и красный контейнер не повторяет размеров изображения

Спасибо всем за помощь, что в итоге: Исходя из спеки: если у элемента одно из свойств overflow-x или overflow-y установлено в visible, а второе из этих свойств в любое значение отличное от visible, то для второго значение автоматически считается установленным в "auto". Т.е. как ни пытайся, а заставить выходящих за пределы родителя по одной оси детей обрезаться, а по другой оси показываться - ничего не получится, будет либо автоматически скролл у родителя добавляться, либо нужно создавать создавать два вложенных враппера, у одного из которых будет overflow-x: hidden, например, а второму выставлять фиксированную высоту. Т.к. ни один из этих вариантов мне не подходит, пришлось идти другим путем и менять принцип действия моего компонента, чтобы избавится от надобности применять к нему overflow: hidden.

Да, спасибо большое, действительно нашел по этой теме и на stackowerflow и на нашем форуме ответы. Например, в этой теме содержится нужная информация https://htmlforum.io/topic/55822-overflow-ogranichivaet-absolyutnyiy-blok/ Благодарю, этот вариант подойдет если заранее известны высота и/или ширина контейнера, у меня же они динамические.

Хочу добиться того чтобы контейнер выпадающего списка (коим в реальном проекте и является абсолютно позиционированный красный элемент) визуально отображался поверх объекта .carousel, а не внутри него. Это можно было бы сделать если поместить абсолютно позиционированный элемент за пределы карусели, дать ему position: fixed или absolute и потом js ом задать нужные координаты, но у меня нет возможности так сделать т.к. этот элемент создается плагином (jquery-nice-select). Должно работать точно так же как если в примере раскомментить строку в css файле которую я закомментил, и там еще подписал что если ее раскомментить то все будет работать как надо (If you uncomment this property - scrollbar disappears), с одним отличием - по оси X контент не должен выходить за пределы контейнера (в примере этого не видно, но т.к. overflow-x: visible - контент будет видим по оси X)

Насколько я вижу это все просто заставляет скроллбар не отображаться, но не оказывает влияния на то как элемент ведет себя. Мне же нужно чтобы все выглядело так, как выглядит когда элементу .carousel задаешь overflow: visible, но в этом случае есть один момент - контент будет вылазить за пределы карусели и по оси X (по горизонтали), а мне это не нужно.

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

Спасибо Да, действительно, я упустил position: relative, и после ее добавления оба примера начинают выглядеть одинаково изначально (обрезаются). Но основная проблема осталась - нужно чтобы все что выходит за пределы элемента по оси X обрезалось, а все что выходит за пределы по оси Y - отображалось. Я обновил описание проблемы и тему беседы, может так меньше будет взрывать мозг

Всем доброго времени суток У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент становится полностью видим, вылазя за пределы контейнера. Вопрос: почему браузеру есть разница установлен ли overflow-x в visible если контент внутри карусели выходит за пределы карусели по оси Y, а не X, и как решить эту проблему?

Если вы про свойство numberProduct у экземпляров класса Product, то оно у каждого из этих классов свое (не общее) и соответственно увеличивается на один у каждого из этих экземпляров т.к. вы в addProduct передаете каждый раз новый экземпляр класса Product. Возможно, вам нужно объявить это свойство как static и обращаться к нему через self для получения ожидаемого эффекта.

Вы задаете padding для td в котором лежит a. Делайте наоборот - задавайте padding для a. Кроме того для того чтоб padding применился надо для a задать display: block или display: inline-block; https://jsfiddle.net/50opwxmr/