3 Лесно и бързо техника CSS за изрязване на снимки, всичко за създаване на сайтове

В тази статия, ние ще ви разкажа за 3 бързи и лесни методи на CSS. cmozhete, който използвате, за да се показва само част от картината на вашата страница.

Всички използвани методи са действително се нуждаят само от няколко линии на CSS код. Все пак, това не е обрязано в истинския смисъл на думата (CSS, докато не можете да направите това), ние просто се скрие и да се покаже само част от картината, която искаме да видим.

Тези техники могат да бъдат много полезни, ако искате да донесе снимка на определен размер, това е, което искате да създадете, например, си миниатюри (малък копие на снимката) в раздела за новини, или нещо подобно.

Техника 1 - Използване на отрицателни маржове (Отрицателните Полета)

виж пример
Съгласно тази техника, изображението трябва да бъде поставен в майка елемент, в нашия случай, това е точка (таг

). Родителски параграф трябва да бъде плаващ (плаващ) елемент (или предварително определена ширина). Тази техника няма да работи на елементите с атрибута "пълна ширина» (пълна ширина).

След това задайте отрицателни маржове за всички четири страни: първото (най-горе), десен (вдясно), най-долния (отдолу) и в ляво (вляво). Отрицателните полета определят: как отрязан във всяка посока нашия имидж, който е в майка (параграф). Получаваме само част от оригиналното изображение - на скрап. След това, когато ние замени родителската собственост за преливане скрити. крием полета, които са извън нашия резитба. Целта се постига. Вие, обаче, ще трябва да калайджия с ценностите, наистина да се чувстват как работи.

По този начин, HTML изглежда така:

заключение

Ако чета примери един след друг, ще забележите, че те са абсолютно идентични. Това още веднъж доказва, че има много начини да се постигне същото и в CSS.

Какво бих избрал за този конкретен ефект?
Използвал съм техниката на номер 1 - отрицателни маржове. Това е най-простият и най-бързият от всички заедно. Плюс това, когато искате да промените нещо, не е нужно да се промени родителските ценности: просто промяна на негативните маржове и родител на себе си "адаптират".

Може да се интересувате да ↓↓↓

  • 3 Лесно и бързо техника CSS за изрязване на снимки, всичко за създаване на сайтове
    Центриране DIV хоризонтално и вертикално
  • 3 Лесно и бързо техника CSS за изрязване на снимки, всичко за създаване на сайтове
    Разкриват - модален прозорец с JQuery
  • 3 Лесно и бързо техника CSS за изрязване на снимки, всичко за създаване на сайтове
    Създаване на триъгълник на CSS
  • 3 Лесно и бързо техника CSS за изрязване на снимки, всичко за създаване на сайтове
    Промяна IMG SRC в, като се използва JQuery

Имам нужда от това да изрежете ръчно размера на изображението на 250 × 250 или 300 × 300 (снимки с различни размери), до 250 х 200 и 300 х 200

Благодаря за статията!

Как да се регистрирате в CSS, че винаги ще бъде картината на всички размери са били отрязани до определен размер (да речем 180rh 100rh)

Идват на ум са две възможности:

1. Поставете снимката в контейнер с фиксиран размер и с преливане на имота: скрит

2. фоново изображение на всеки блок елемент с фиксирани размери и след това отново с преливане на имота: скрит.