Часто для портфолио используют превьюшки, выделяют какую то очень важную часть изображения предварительно вырезают ее в редакторе и загружают в портфолио, есть конечно скрипты с помощью которых можно обрезать изображение как хочешь прям в браузере, но я вам расскажу как обрезать картинку на чистом css, ну мы будем обрезать ее не в прямом смысле, а как бы скрывать лишние стороны.
Вот тут готовый пример с двумя методами, лучше посмотрите сразу, так как сам найдя какую то информацию или интересный урок сначала ищу ссылку на пример а уже потом если нравится, перехожу к коду.
Главный помощник в этом у нас будут css атрибут overflow с параметром hidden, он не даст вылезти изображению за рамки и не появится прокрутка.
В первом методе мы будем пользоваться отрицательными полями атрибута margin для изображения, css код выглядит так:
1 2 | .crop{overflow:hidden;} .crop img{margin:-50px -50px -50px -50px;} |
html так:
1 2 3 | <div class="crop"> <img src="crop.jpg" alt="" /> </div> |
Теперь объясняю, мы поместили изображение в блок с атрибутом overflow:hidden который поможет нам скрыть ненужные стороны то есть обрезать, и задали для изображения параметры с отрицательными полями, работает это очень просто, то есть для атрибута как обычно задаются значения отступа сверху справа снизу и слева по часовой стрелке, только тут мы не отступаем а наоборот отнимаем значения от предыдущего объекта, я отнял с каждой стороны по 50 пикселей, то есть как обычно этот код можно заменить на более короткий: margin:-50px либо margin:-50px -50px;
поиграйтесь со значениями и вы поймете как он работает.
Второй метод с абсолютным позиционированием, тут уже я думаю те кто хоть чуть знаком с версткой, уже догадываются как работает этот метод, или нет??)) ладно все равно расскажу.
Вот css
1 2 3 4 5 6 7 8 9 10 11 | .crop2{ overflow:hidden; position:relative; width:350px; height:200px; } .crop2 img{ position:absolute; top:-50px; left:-50px; } |
вот html
1 2 3 | <div class="crop2"> <img src="crop.jpg" alt="" /> </div> |
Количество html кода для этого метода не возросло а вот css кода возросло на порядок, тут уже нужно задавать ширину и высоту, но не полного изображения а уже обрезанного по ширине справа и высоте снизу, а слева и сверху мы будем отрезать с помощью абсолютного позиционирования, top:-50px и left:-50px, вот и все. Если что то не понятно пишите в комментариях.
Еще раз пример
нашел тут, кстати там три метода, третий мне не понравился, слишком геморный, но если хотите его тоже опишу.
Ты дибил тупорылый – куда ты??? Выёбывайся меньше!!!
)))))дурак я тебя унесу
У вас просто обрезка со всех сторон по 50рх.
А если две картинки разные по размерам – мы при такой обрезке получим разные картинки, а как сделать css обрезку, чтобы получить одинаковые.
Норм Спасиб
ни чего не понял