Comments 39
Просто. Зачем?
Надо добавить кадр в слайдер — побежали править css. Не надо так.
Конечно, для пользовательской галереи это не подойдет, однако, на мой взгляд, такие вещи и не должны использоваться таким образом. С другой стороны, делать все на статике нереально, разве что только из принципа, тогда вообще отпадает необходимость прибегать к таким ухищрениям, намного проще взять готовый js.
Данное решение можно использовать, например, в генераторе статик сайтов. Написал код один раз, дальше он генерит этот css без необходимости правки кода: добавил картинку в папку, код увидел больше картинок, для каждой перегенерил css.
Какие плюсы с точки зрения браузера: я лично не особо опытный, поэтому плюсов никаких не вижу. Наверное, если браузер старый, то тут уже ничего не поможет.
Если брать, например, работу в joomla 2.5, то из-за того, что там mootools, там постоянно возникают проблемы со слайдами из jquery из-за конфликтующих функций. С этой позиции — не будет конфликта js.
Буду признателен, если кто-то поделится своим взглядом и опытом. Спасибо.
Данное решение можно использовать, например, в генераторе статик сайтов. Написал код один раз, дальше он генерит этот css без необходимости правки кода: добавил картинку в папку, код увидел больше картинок, для каждой перегенерил css.
Какие плюсы с точки зрения браузера: я лично не особо опытный, поэтому плюсов никаких не вижу. Наверное, если браузер старый, то тут уже ничего не поможет.
Если брать, например, работу в joomla 2.5, то из-за того, что там mootools, там постоянно возникают проблемы со слайдами из jquery из-за конфликтующих функций. С этой позиции — не будет конфликта js.
Буду признателен, если кто-то поделится своим взглядом и опытом. Спасибо.
То же самое, только универсально и без необходимости редактировать CSS для каждой новой картинки: jsbin.com/miwuke/
Добавьте анимации по вкусу.
.slider {
position:relative;
width:700px;
padding-top:370px;
text-align:center;
}
.slider__check {
position:absolute;
clip:rect(0 0 0 0);
overflow:hidden;
}
.slider__image {
position:absolute;
top:0;
left:0;
}
.slider__label {
overflow:hidden;
display:inline-block;
width:20px;
height:20px;
background:#069;
border-radius:50%;
text-indent:-9999px;
}
/* Display */
.slider__image {
display:none;
}
.slider__check:checked + .slider__label + .slider__image {
display:block;
}
/* Current */
.slider__check:checked + .slider__label {
background:#C00;
}Добавьте анимации по вкусу.
В сторону: тем, кто кладёт картинки в виде фона, хочется оторвать руки. Я всё равно до них доберусь, если захочу сохранить, но потрачу лишнее время.
Вы в самом деле думаете что это делается чтобы «защитить» изображения?
Я не вижу других причин, озвучьте.
Растягивание изображение на весь размер блока с сохранением пропорций
Этого легко добиться позиционированием img внутри контейнера.
Если заранее известны размеры контейнера и изображения, то да. Можно, конечно, написать скрипт, который будет определять размеры контейнера и изображения и позиционировать его в нём, но это требует больше действий, нежели поместить изображение в фон. Поэтому часто предпочитают ставить изображение в качестве фона.
Я согласен с Вами, что вставлять изображения через img лучше по ряду причин, поэтому предпочитаю использовать img.
Я согласен с Вами, что вставлять изображения через img лучше по ряду причин, поэтому предпочитаю использовать img.
Вот есть, например, такое отличное свойство object-fit. Позволяет делать с картинками все то же самое, что и позиционирование внутри background-image. Но при взгляде на его поддержку, сразу же ухудшается настроение: его не поддерживает даже Edge caniuse.com/#feat=object-fit
Вот и получается, если нужно добиться такого результата, который дают background-size: cover / contain; проще всего их и использовать. Как вариант, адрес картинки поместить в инлайновые стили, а остальные свойства — в CSS. По-моему, решение хоть и не самое красивое, но самое простое и рабочее.
Вот и получается, если нужно добиться такого результата, который дают background-size: cover / contain; проще всего их и использовать. Как вариант, адрес картинки поместить в инлайновые стили, а остальные свойства — в CSS. По-моему, решение хоть и не самое красивое, но самое простое и рабочее.
Тупо потому что для
<img/> нельзя указать src из CSS?
Это делается просто потому, что у background больше возможностей, чем у img.
Камень в огород W3C. У background ещё есть куча ограничений для Safari в iOS к примеру.
Каких?
background-attachment: fixed не работает ни в safari под ios, ни в chrome под андоид вместе с background-size: cover.
Да там банально ещё есть ограничение на размер. У нас картинка просто не показывалась когда была больше 1024x1024 (при наличии других картинок в системе). Но у нас ещё осложнялось тем, что это был не сам Safari а WebView…
Как я понял, если картинка висит в background то всегда в памяти (причём видео), что бы потом можно было производить манипуляции на лету. Img же рендрится в сам контекст и вгружается в память только по требованию перерисовки (изменение размера или видимо скругление углов). У смартфонов что с памятью, что с GPU тухло от сюда и ограничения.
Как я понял, если картинка висит в background то всегда в памяти (причём видео), что бы потом можно было производить манипуляции на лету. Img же рендрится в сам контекст и вгружается в память только по требованию перерисовки (изменение размера или видимо скругление углов). У смартфонов что с памятью, что с GPU тухло от сюда и ограничения.
UFO just landed and posted this here
У img есть object-fit / object-position / image-orientation / image-rendering / image-resolution… Так что возможностей тоже хватает, правда не везде оно пока что поддерживается.
Мдя… ещё пару лет чую нельзя будет это юзать. Если object-fit IE боится то object-position даже safari, а image-orientation кажется только FF любит.
Оно начисто игнорируется даже, казалось бы, современным браузером Edge (популярность которого, как мне кажется, сейчас начнет стремительно расти, потому что в нем, в принципе есть все, что нужно обычному юзеру, а значит его нельзя списывать со счетов).
Так что вряд ли разумно использовать сейчас эти свойства: достаточно много людей увидят вместо того, что вы верстали, растянутую и уродливую картинку.
Так что вряд ли разумно использовать сейчас эти свойства: достаточно много людей увидят вместо того, что вы верстали, растянутую и уродливую картинку.
Расскажите о конкретных примерах, когда содержимое страницы (если мы говорим про эту галерею) нужно засунуть в оформление и сделать его недоступным пользователю.
Сделайте слайдер с картинкой, где можно задавать какое либо небольшое количество опций слайда, не зная размера картинки, не используя java-script. Сам слайдер может иметь любой размер, в том числе и адаптироваться под контент внутри него.
screencloud.net/v/wwXW
screencloud.net/v/wwXW
можно задавать какое-либо небольшое количество опций слайда
Честно говоря, я не понял задачи и тем более, почему фон здесь лучше, чем img
Сделайте, чтобы картинка повторялась. Сделайте, чтобы картинка занимала всё пространство с сохранением пропорций без жс. Сделайте паралакс без жс.
UFO just landed and posted this here
С вас такой верстальщик смотрю, как и комментатор. То есть хреновый.
1. Имелось ввиду background-size: cover. Картинка заполняет собой всё пространство, масштабируется по меньшей стороне, а лишнее обрезается. К тому же пример в тостере крайней плохой, и в сафари не работает — screencloud.net/v/fE7f
2. Такой метод не применим к живым сайтам, в которых может редактироваться контент. В которых блоки занимают не определённую высоту и позицию. А тем более это не применимо к слайдеру.
1. Имелось ввиду background-size: cover. Картинка заполняет собой всё пространство, масштабируется по меньшей стороне, а лишнее обрезается. К тому же пример в тостере крайней плохой, и в сафари не работает — screencloud.net/v/fE7f
2. Такой метод не применим к живым сайтам, в которых может редактироваться контент. В которых блоки занимают не определённую высоту и позицию. А тем более это не применимо к слайдеру.
UFO just landed and posted this here
Ну вот, а говорите верстать умеете, а живых сайтов не делали, и требований клиентов не знаете. Дальше говорит не о чем. Типичный кодер тимфорестера.
UFO just landed and posted this here
На личности перешли вы. Но как и прежде, видно ваши «глубокие» знания, особенно про object-fit. А так же, все реальные задачи, с которым сталкиваются кодеры в реальной жизни для вас странные — не лицо не хватка опыта.
PS. background-size caniuse.com/#feat=background-img-opts, object-fit — caniuse.com/#feat=object-fit. Рас старые кодеры не умеют гуглить и не знают где и как работают те или иные свойста. Представляю какой малины вы учите в ваших статьях.
PS. background-size caniuse.com/#feat=background-img-opts, object-fit — caniuse.com/#feat=object-fit. Рас старые кодеры не умеют гуглить и не знают где и как работают те или иные свойста. Представляю какой малины вы учите в ваших статьях.
UFO just landed and posted this here
Только это не слайдер, а tabbar. Слайдер должен уметь перелистываться, отвечать на свайпы
Sign up to leave a comment.
Интересный и одновременно простой слайдер на чистом CSS3