С помощью CSS-стилей показать только часть картинки
Можно ли вывести на экран обрезанную картинку, используя только html и css, но при этом, не используя (float: left)
Необходимо центрировать и масштабировать картинку по экрану и сохранить радиусы и тени.
В примере ниже используются два изображения:
1. 1600х900 (размеры всегда такие)
2. 800х900 (размеры всегда такие) — т.е. ровно половина от первого рисунка со смещением от левого края на Х пикселей.
Можно ли для отображения второго рисунка использовать только первый с указанием отступа Х?
Помогите, у кого есть время на тренировку мозгов. Буду очень благодарен!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
head> style> .full < width: 25%; border-radius: 5%; box-shadow: -2px -2px 6px 2px rgba(0,0,0,0.99), 2px 2px 6px 2px rgba(255,255,255,0.35), inset 2px 2px 6px rgba(0,0,0,0.99), inset -2px -2px 6px rgba(255,255,255,0.35); margin: 0 auto; >.full img < border-radius: 5%; vertical-align: middle; position: relative; width: 100%; height: 100%; z-index: -1; >/style> /head> body> /br> div class="full">img src="http://s018.***********/i510/1607/6d/a1b9bcc9aaf0.jpg">/div> /br>/br> div class="full">img src="http://i062.***********/1607/6d/d3f19ba9c588.jpg">/div> /body>
Браузер не видит часть стилей из CSS
Доброго времени суток! WEB программирование занимаюсь не очень давно. Столкнулась с проблемой.
Шаблонизатор SMARTY. Ломается часть css стилей
Здравствуйте. Проблема вот в чём, когда я делаю просто html страницу и подключаю стили то всё.
Оптимизация css-стилей с помощью google pagespeed
google ругается Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение.
Вы хотите просто картинку обрезать? Тогда попробуйте отрицательные поля.
div> img src="https://www.cyberforum.ru/images/cyberforum_logo.png"> /div>
div { float:left; overflow:hidden; border:1px solid #ccc; } img { margin:0 0 0 -50%; }
В том то и дело, что не просто обрезать. Нужно еще ее отцентровать по экрану и задать ширину в процентах от ширины экрана. Но с (float:left) у меня это никак не получается
div class="wrapper"> div class="wrap"> img src="https://www.cyberforum.ru/images/cyberforum_logo.png"> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
.wrapper { width:100%; border:1px solid #000; } .wrap { overflow:hidden; border:1px solid #ccc; margin:0 auto; width:20%; } img { width:100%; margin:0 0 0 -50%; }
br> div class="full">img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg">/div> br>br> div class="full2">img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg">/div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
.full { width: 25%; border-radius: 5%; box-shadow: -2px -2px 6px 2px rgba(0,0,0,0.99), 2px 2px 6px 2px rgba(255,255,255,0.35), inset 2px 2px 6px rgba(0,0,0,0.99), inset -2px -2px 6px rgba(255,255,255,0.35); margin: 0 auto; } .full img { border-radius: 5%; vertical-align: middle; position: relative; width: 100%; height: 100%; z-index: -1; } .full2 { width: 25%; border-radius: 5%; box-shadow: -2px -2px 6px 2px rgba(0,0,0,0.99), 2px 2px 6px 2px rgba(255,255,255,0.35), inset 2px 2px 6px rgba(0,0,0,0.99), inset -2px -2px 6px rgba(255,255,255,0.35); margin: 0 auto; height:300px; overflow:hidden; position:relative; } .full2 img { border-radius: 5%; height:100%; position:absolute; left:-200px; }
Сообщение было отмечено Fedor92 как решение
Решение
smaqy и koders
Спасибо большое за помощь!
koders
Это уже ближе. Но все равно немного не то. При изменении размера окна, верхняя рамка (16:9) ведет себя правильно, а нижняя нет. Она меняет свои пропорции. А этого быть не должно, должно оставаться 8:9 всегда.
И сам рисунок в нижней рамке с изменением размера окна не масштабируется, хотя должен. Он должен вести себя как и рисунок на верхней картинке.
Здесь я использую два рисунка. Верхний — исходник, а нижний делаю в фотошопе. А задача сделать все из одного. Так же правильнее будет?!
Там правда у меня еще таблица (две пары картинок). но мне хотя бы просто в одном варианте (одну пару), а дальше я и сам справлюсь)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
table class="tab"> tr> td> /br> div class="ratio"> div class="ratio-inner ratio-16-9"> div class="ratio-content"> img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg"> /div> /div> /div> /br> div class="ratio"> div class="ratio-inner ratio-8-9"> div class="ratio-content"> img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg"> /div> /div> /div> /td> td> /br> div class="ratio"> div class="ratio-inner ratio-16-9"> div class="ratio-content"> img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg"> /div> /div> /div> /br> div class="ratio"> div class="ratio-inner ratio-8-9"> div class="ratio-content"> img src="http://luxfon.com/pic/201407/1600x900/luxfon.com-30194.jpg"> /div> /div> /div> /td> /tr> /table>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
.tab { width: 95%; } .ratio { width: 85%; /* здесь можно установить любую нужную ширину */ box-shadow: -2px -2px 6px 2px rgba(0,0,0,0.99), 2px 2px 6px 2px rgba(255,255,255,0.35), inset 2px 2px 6px rgba(0,0,0,0.99), inset -2px -2px 6px rgba(255,255,255,0.35); margin: 0 auto; border-radius: 1%; } .ratio-inner { position: relative; height: 0; border: none; } .ratio-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .ratio-16-9 { padding-top: 56.25%; } .ratio-16-9 img { border-radius: 1%; width: 100%; position: relative; z-index: -1; } .ratio-8-9 { padding-top: 112.5%; overflow:hidden; } .ratio-8-9 img { border-radius: 1%; height: 100%; margin-left: -60%; position: relative; z-index: -1; }
3 простых и быстрых техники CSS для обрезки картинок
18.01.2010 11.02.2014 по 2Web 100 605
В этой статье мы расскажем вам о 3 быстрых и простых методах CSS, которые вы cможете использовать, чтобы показать только часть картинки на вашей страничке.
Все использованные здесь методы, фактически нуждаются только в паре строчек CSS кода. Однако, это не обрезание в прямом смысле этого слова (CSS пока не может сделать этого), мы просто скрываем и показываем только ту часть картинки, которую мы хотим увидеть.
Эти методики могут быть очень полезны, если вы хотите привести картинку к определенному размеру, то есть хотите создать, например, её превьюшку (уменьшенная копия изображения) в секции новостей или что-то подобное.
Техника 1 — использование отрицательных полей (Negative Margins)
Посмотреть пример
По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг
) . Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width).
Затем мы задаем отрицательные поля для всех четырех сторон: верх( top ), право( right ), низ( bottom ) и лево( left ). Отрицательные поля определяют: насколько срезано в каждом направлении наше изображение, находящееся в родителе(параграфе). Получаем только часть от первоначальной картинки — обрезок. Затем, когда мы заменяем родительское свойство overflow на hidden , мы скрываем поля, которые находятся за нашим обрезком. Цель достигнута. Вам, правда, придется повозиться со значениями, чтобы по-настоящему почувствовать, как это работает.
Итак, HTML выглядит примерно так: