ows.nightwolf

Пользователь
  • Публикации

    125
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    9

Последний раз ows.nightwolf выиграл 19 апреля 2017

Публикации ows.nightwolf были самыми популярными!

Репутация

28 Положительная

О ows.nightwolf

  • Звание
    Участник
  • День рождения 04/05/1991

Информация

  • Пол
    Мужчина
  • Откуда
    Минск

Контактная информация

  • Skype
    nightwolf4343

Посетители профиля

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

    Как сверстать такое

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

    Вписать изображение в контейнер с подгонкой размеров

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

    Вписать изображение в контейнер с подгонкой размеров

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

    Вписать изображение в контейнер с подгонкой размеров

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

    ows.nightwolf