Při přípravě obrázků na WEB je často nutné je oříznout, aby se zvýraznily potřebné části obrázku a oříznout nepotřebné. Kromě čistě uměleckých soudů je ke zmenšení souboru zapotřebí takové ořezávání nebo, jak se také říká, ořezávání. Čím menší je obrázek, tím menší je velikost jeho souboru a tím rychleji se načte na WEBovou stránku.

Jak odstranit nepotřebné části obrázku

Podívejme se, jak se vlastně ořez provádí odstraněním úzkého černého pruhu u spodního okraje fotografie, který se nepodařilo dostatečně zesvětlit. Oříznutí se provádí speciálním nástrojem Crop Tool (C).

Klepnutím na tlačítko Nástroj oříznutí (C) na panelu nástrojů vyberte tento nástroj.

Nastavte ukazatel myši na tvar v levém horním rohu obrázku.

stiskněte a podržte levé tlačítko myši.

Aniž byste uvolnili levé tlačítko myši, přesuňte ukazatel myši na spodní část pravého okraje fotografie tak, aby tečkovaný rámeček výběru, který se objeví, neobsahoval úzký černý pruh na spodním okraji obrázku.

Uvolněte levé tlačítko myši. Rám se uzamkne a v jeho rozích a uprostřed stran se objeví čtvercové značky. Oblast obrázku mimo rámeček pro oříznutí bude ztmavena, čímž bude označena část fotografie, která se ořezává.

Pomocí těchto značek můžete upravit a otočit okraj rámu. Chcete-li přesunout rámeček pro oříznutí, jednoduše umístěte ukazatel myši do vybrané oblasti a přetáhněte jej na požadované místo. Chcete-li změnit velikost vybrané oblasti, přesuňte jeden z rohových úchytů. Pokud při pohybu podržíte tlačítko Shift, proporce plochy zůstanou zachovány. Chcete-li rámeček otočit, umístěte ukazatel myši, který bude mít tvar zakřivené šipky, mimo oblast výběru a pohybem myši dosáhněte vhodné polohy pro rámeček. Chcete-li oříznutí zrušit, jednoduše stiskněte tlačítko Esc.

Přesunutím úchytů rámečku výběru se ujistěte, že rámeček pro oříznutí zahrnuje celý obrázek, nepočítaje úzký černý pruh na spodním okraji fotografie.

Dvakrát klikněte do ořezového pole nebo stiskněte Enter. Fotografie bude oříznuta podél nastaveného okraje.

Jak zmenšit velikost obrázku

Ale i po oříznutí je fotografie na WEB stránku poměrně velká. Při rozlišení obrazovky 800 x 600 pixelů (a podle statistik s tímto rozlišením v současnosti pracuje většina uživatelů webu) zabírá fotografie na displeji značné množství místa. Soubor obrázku této velikosti bude navíc poměrně velký a jeho načítání bude trvat dlouho. Zmenšíme tedy velikost obrázku, což zase sníží velikost souboru.

Vyberte příkaz nabídky Obrázek - Velikost obrázku. Na displeji se zobrazí dialogové okno Image Size.

V nejvyšší části dialogu ve skupině ovládacích částí Rozměry pixelů (Dimension in pixels) je uvedena aktuální velikost souboru ve formátu PSD - 400,3K a také aktuální šířka (Width) a výška (Height) obrázek v pixelech. Vaše hodnoty po oříznutí se mohou mírně lišit.

V ovládací skupině Velikost dokumentu je uvedena velikost dokumentu v centimetrech a jeho grafické rozlišení (Rozlišení). Když je nastaven příznak Omezit proporce, program automaticky zachová proporce obrázku při změně jednoho z rozměrů – šířky nebo výšky.

Když změníte velikost obrázku ve skupině ovládacích částí Rozměry v pixelech, jeho vlastnosti pro dokument se odpovídajícím způsobem změní – buď jeho rozměry, nebo grafické rozlišení, v závislosti na tom, zda je zaškrtnutý nebo zrušený příznak Převzorkovat obrázek. Pokud je tento příznak nastaven, změní se velikost dokumentu a podle toho i velikost souboru obrázku. Pokud je příznak vymazán, lze změnit pouze rozměry dokumentu. Při tom všem se odpovídajícím způsobem změní jeho grafické rozlišení a velikost obrázku v pixelech a velikost souboru zůstanou bez konfigurace.

Při zmenšení rozměru nebo grafického rozlišení Adobe Photoshop odstraňuje z obrázku superredundantní informace, a když se tyto charakteristiky zvýší, vytvoří chybějící informace na základě barevných hodnot stávajících pixelů. V obou případech program používá jednu z 5 metod interpolace, kterou lze vybrat v rozevíracím seznamu Převzorkovat obrázek.

Vzhledem k tomu, že fotografie, jejíž velikost chceme změnit, byla vytvořena pro zobrazení na displeji, nemělo by se měnit její grafické rozlišení.

Ujistěte se, že je zaškrtnuto políčko Převzorkovat obrázek, aby se zachovalo grafické rozlišení obrázku a změnila se jeho velikost.

Do vstupního pole Šířka ve skupině Rozměry v pixelech ovládacích částí zadejte novou hodnotu pro šířku obrázku v pixelech - 300. Hodnota výšky obrázku ve vstupním poli Výška se automaticky změní, stejně jako velikost dokumentu v poli Velikost dokumentu. skupina ovládacích částí ( Velikost dokumentu). V horní části dialogu také uvidíte novou, zmenšenou hodnotu velikosti souboru a vedle ní v závorkách předchozí svazek.

Zavřete dialogové okno Velikost obrázku kliknutím na OK. Budou použity zadané charakteristiky a velikost obrázku v okně dokumentu se zmenší.

Jak se vyhnout ztrátě vlastností obrázku při změně jeho velikosti

Jak již bylo naznačeno, zmenšením rozměru obrázku se z něj odstraní superredundantní informace, což vede k určitému poklesu ostrosti. Použitím filtru Unsharp Mask lze do určité míry obnovit ostrost snímku.

Vyberte příkaz nabídky Filtr - Zostřit - Neostřit maska ​​(Filtr - Ostrost - Ostrost obrysu). Na displeji se objeví dialog Unsharp Mask.

Posunutím posuvníku Množství obnovte ostrost fotografie. Hodnota tohoto parametru by se měla pohybovat v rozmezí 50-60 %.

Klepnutím na OK zavřete dialogové okno Urisharp Mask. Obraz bude ostřejší.

Uložte dokument výběrem příkazu nabídky Soubor - Uložit.

Protože když změníte velikost obrázku, jeho kvalita se kvůli odebrání sníží zbytečné informace, pak by se této operaci pokud možno mělo vyhnout. Pokud skenujete obrázek, je lepší v tomto kroku zjistit jeho velikost a skenovat s rozlišením, které poskytne nejlepší kvalita Zobrazit.

V tomto článku se naučíme, jak měnit velikost a ořezávat obrázky pomocí prvku v HTML5, a když už jsme u toho, dejme ovládacím prvkům stylový design stejně jako ve fotoeditorech.

V dnešní době je mnoho webových stránek a webových aplikací vybaveno technologií pro zpracování obrazu. To lze provést na straně serveru, což způsobí časové náklady na přenos potenciálně velkého obrazu. Abyste tomu zabránili, můžete obrázky zpracovat pomocí klientský stroj aby se proces urychlil.

Uděláme to přes plátno a nakreslíme obrázky správnou velikost a poté získání nových snímků. Mnoho prohlížečů tuto metodu podporuje, takže můžeme začít hned s menším omezením výkonu.

Formátování velkých obrázků může zpomalit prohlížeč nebo způsobit jeho úplné zastavení. To nás nutí přemýšlet o nastavení limitů pro nahrané obrázky. Pokud je důležitá kvalita výsledných obrázků, pak nás možná překvapí, v co je prohlížeč promění. Na internetu můžete najít několik technologií pro zlepšení kvality zpracování obrazu, ale nebudeme je zde uvažovat.

Za tímto účelem začínáme pracovat!

Označení

V naší ukázce budeme pracovat s jedním daným obrázkem:

Všechno! Nepotřebujeme žádné další HTML.

CSS

Ani CSS kód nebude příliš velký. Pojďme definovat styly pro resize-container a samotný obrázek.

Resize-container ( pozice: relativní; zobrazení: vložený blok; kurzor: přesun; okraj: 0 auto; ) .resize-container img ( display: block ) .resize-container:hover img, .resize-container:active img ( obrys: 2px přerušovaná rgba(222,60,80,.9 )

Nyní nastavíme pozice a styly pro jednotlivé „úchyty pro změnu velikosti“. Jedná se o malé čtverečky umístěné v rozích obrázků, kterými přetažením změníme velikost obrázku.

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( pozice: absolutní; zobrazení: blok; šířka: 10px; výška: 10px; pozadí: rgba(222,60,80,.9); .resize-handle-nw (nahoře: -5px; vlevo: -5px; kurzor: nw-resize; ) .resize-handle- sw; ( dole: -5px; vlevo: -5px; kurzor: sw-resize; ) .resize-handle-ne (nahoře: -5px; vpravo: -5px; kurzor: ne-resize; ) .resize-handle-se (dole : -5px vpravo: -5px;

JavaScript

Začněme vytvořením proměnné a plátna v Canvas.

Var resizeableImage = function(image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), constrain = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("canvas" )); resizeableImage($(".resize-image"));

Nyní vytvoříme spouštěcí funkci, která se spustí okamžitě. Tato funkce pracuje s kontejnerem, ve kterém je obrázek uvnitř, nastavuje velikost a kopíruje původní obrázek pro oříznutí. Také přiřadíme objekt jQuery, abychom na něj mohli později odkazovat a pomocí operátorů pohybu myši reagovat na tažení myší.

Var resizeableImage = function(image_target) ( // ... init = function())( // Vytvořte nový obrázek s kopií původního zdroje // Při změně velikosti vždy použijeme tuto původní kopii jako základní orig_src. src =image_target.src; // Přidání úchytů pro změnu velikosti $(image_target).wrap("

").před(" ").před(" ").po(" ").po(" "); // Získání proměnné pro kontejner $container = $(image_target).parent(".resize-container"); // Přidání událostí $container.on("mousedown", ".resize-handle", startResize ); //... init();

Funkce startResize a endResize sdělují prohlížeči, kdy má začít věnovat pozornost pohybu myši a kdy přestat.

StartResize = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", změna velikosti); $(document).on("mouseup", endResize ); endResize = function(e)( e.preventDefault(); $(document).off("myší touchend", endResize); $(document).off("mousemove touchmove", změna velikosti); );

Než začnete se sledováním myši, musíte při požadavku na stránku zkontrolovat aktuální nastavení klienta. uložíme je do proměnné event_state a použijeme je později v naší práci.

SaveEventState = function(e)( // Uložení počátečních podrobností události a stavu kontejneru event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // Toto je oprava pro mobilní safari // Z nějakého důvodu neumožňuje přímou kopii vlastnosti touches if(typeof e.originalEvent.touches !== "undefined")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = ( ); event_state.touches[i].clientX = 0+ob.clientX;

Funkce změny velikosti je nejdůležitější. Aktivuje se při roztažení obrazu. Pokaždé vypočítáme nové velikosti obrázků v závislosti na nové poloze čtverců.

Změna velikosti = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(okno).scrollLeft() mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); x - stav_udalosti.kontejner_left; výška = myš.y - stav_události.kontejner_nahoře; nahoře = stav_udalosti.nahoru_kontejneru; && výška > min_výška && šířka< max_width && height < max_height){ resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

Dále přidáme možnost omezit velikost obrázku pomocí klávesy Shift nebo proměnné.

Poznámka: Vzhledem k tomu, že ve skutečnosti měníme image, a ne jen dáváme novou délku a výšku, stojí za to se nad tím zamyslet přípustné množství pomocí funkce resizeImage k řízení výkonu serveru.

Nové velikosti obrázků

Kreslení obrázků v Canvas je stejně snadné jako drawImage . Nastavíme výšku a délku obrázku a poté poskytneme originál. ToDataURL také používáme k získání verze výsledku operace zakódované v Base64.

K dispozici jsou úplné vysvětlení možností dostupných pro tuto operaci.

ResizeImage = function(width, height)( resize_canvas.width = width; resize_canvas.height = výška; resize_canvas.getContext("2d")).drawImage(orig_src, 0, 0, šířka, výška); $(image_target).attr( "src", resize_canvas.toDataURL("image/png"));

Příliš snadné? Existuje jedno upozornění: obrázek musí být hostován ve stejné doméně jako naše stránka nebo . Pokud tomu tak není, budete mít problémy se „zkaženým plátnem“.

Zvyšování přes další vrcholy

Nyní byste měli mít funkční demo. Ale ještě to není hotové. Na tento moment Obrázek můžeme protáhnout pouze jedním rohem, ale chceme použít všechny čtyři. Chcete-li to provést, musíte pochopit, jak to funguje.

Když obrázek natáhneme, musí se pohnout i rohy sousedící s drženým rohem, ale opačný konec obrázku musí být zafixován.

Kód můžeme změnit tak, že když se obrázek natáhne v libovolném úhlu, změní se. Pojďme aktualizovat funkci změny velikosti:

Změna velikosti = function(e)( var mouse=(),width,height,left,top,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft() mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); Umístěte obrázek různě v závislosti na přetaženém rohu a omezení if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top ; left = event_state.container_left; top = event_state.container_top ) else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-sw"))( šířka = stav_události.šířka_kontejneru - (myš.x - stav_události); .container_left = mouse.y - event_state.container_top; top = event_state.container_top else if($(stav_udalosti.evnt.target).hasClass("změna velikosti-nw") šířka = stav_události.šířka_kontejneru - (myš.x - stav_události.levý_kontejner); výška = stav_události.výška_kontejneru - (myš.y - stav_události.nahoře_kontejneru = myš.y; .shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) else if($(event_state.evnt.target).hasClass("resize-handle-ne" ) )( width = mouse.x - event_state.container_left; výška = stav_události.výška_kontejneru - (myš.y - stav_události.vrch_kontejneru); left = event_state.container_left; top = myš.y; if(constrain || e.shiftKey)( top = mouse.y - ((šířka / orig_src.width * orig_src.height) - výška); ) ) // Volitelně zachovat poměr stran if(constrain || e.shiftKey)( výška = šířka / orig_src.width * orig_src.height ) if(width > min_width && height > min_height && width;< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

Nyní zkontrolujeme, který úchyt pro změnu velikosti byl použit, a použijeme potřebné změny.

Přesouvání obrázku

Nyní, když můžeme změnit velikost obrázku, možná jste si všimli, že se někdy „posune“. Je nutné přidat možnost přesunout objekt do středu rámu. Pojďme si naši inicializační funkci trochu rozšířit.

Init = function())( //... $container.on("myší dolů", "img", startMoving); )

Nyní přidáme funkce startMoving a endMoving, podobné startResize a endResize.

StartMoving = function(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving ); endMoving = function(e)( e.preventDefault(); $(document).off("mouseup", endMoving); $(document).off("mousemove", pohyb); );

V pohyblivé funkci musíme zjistit polohu levého horního čtverce. Měl by se rovnat počátečnímu s malým offsetem vypočítaným z pohybu ostatních polí.

Moving = function(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); myš .y = (e.klientY || e.stránkaY) + $(okno).scrollTop(); $container.offset(( "vlevo": myš.x - (stav_události.myši_x - stav_události.kontejner_vlevo), "nahoře" : myš.y - (stav_události.myší_y - stav_události.nahoře_kontejneru) ));

Oříznutí obrázku

Nyní, když jsme se naučili měnit velikost, musíme přidat oříznutí obrázku. Namísto toho, abychom nechali uživatele bojovat s velikostí oříznutí, vytvořme pouze rám, který je třeba umístit na správné místo a vše bude kolem něj oříznuto. To jim dá příležitost upravit si obrázek, jak chtějí, a zároveň vytvořit výsledné obrázky jednotné velikosti.

Chcete-li to provést, musíte přidat následující kód HTML:

Oříznutí

Je důležité pamatovat na to, že rámeček musí mít vždy jinou barvu než pozadí stránky, jinak mohou nastat problémy.

Překryvná vrstva ( pozice: absolutní; vlevo: 50 %; nahoře: 50 %; levý okraj: -100 pixelů; horní okraj: -100 pixelů; z-index: 999; šířka: 200 pixelů; výška: 200 pixelů; ohraničení: plné 2 pixely rgba( 222,60,80,.9); box-sizing: content-events: none; .overlay:after, .overlay:before (obsah: ""; pozice: absolutní; zobrazení: blok; šířka: 204px; ; výška: 40px: přerušovaný 2px rgba(222,60,80,.9): přerušovaný 2px rgba(222,60,80,.9); margin-top: -40px ) .overlay:after ( bottom: 0; margin-left: -2px; margin-bottom: -40px; ) .overlay-inner:after, .overlay -inner:before ( content: ""; pozice: absolutni: block width: 204px; border-top: dashed 2px rgba(222,60,80,.9); .overlay-inner:before ( left: 0; margin-left: -40px; margin-top: -2px; ) .overlay-inner:after ( right: 0; margin-right: -40px; margin-top: -2px) .btn-crop ( pozice: absolutní; svislé zarovnání: dole; vpravo: 5px; dole: 5px; odsazení: 6px 10px; z-index: 999; barva pozadí: rgb(222,60,80); hranice: žádná; border-radius: 5px; barva: #FFF; )

Pojďme také aktualizovat kód JavaScript:

Init = function())( //... $(".js-crop").on("click", crop); ); crop = function())( var crop_canvas, left = $(".overlay").offset().left - $container.offset().left, top = $(".overlay").offset().top - $container.offset().top, width = $(".overlay").width(), height = $(".overlay").height( crop_canvas = document.createElement("canvas"); = šířka; crop_canvas.height = výška crop_canvas.getContext("2d").drawImage(cíl_obrázku, vlevo, nahoře, šířka, výška, 0, 0, šířka, výška window.open(crop_canvas.toDataURL("image /); png"));)

Funkce oříznutí je podobná funkci resizeImage. Jediný rozdíl je v tom, že rozměry a pozici oříznutí získáváme z pozice rámečku.

Chcete-li oříznout, musíte nastavit devět parametrů operátoru drawImage na plátně. První z nich je původní obrázek. Další čtyři jsou místa používaná pro operaci. Další čtyři jsou souřadnice místa, kde byste měli začít kreslit na plátno, a jakou velikost bude obrázek mít.

Přidání rozpoznávání dotyků a gest

Vytvořili jsme podporu myši. Nezanedbávejme ani mobilní zařízení.

Pro mousedown a mouseup existují ekvivalentní operátory - touchstart a touchend a pro mousemove je touchmove. Musíte si dát pozor, abyste si je nespletli s touchupem a touchdownem (jinak to bude sranda).

Přidejme touchstart a touchend všude tam, kde máme mousedown , a mouseup spolu s touchmove kdekoli máme mousemove .

// V init()... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //V startResize() ... $(document).on("mousemove touchmove", move); $(document).on("myší touchend", endMoving); //V endResize()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb); //V startMoving()... $(document).on("mousemove touchmove", move); $(document).on("myší touchend", endMoving); //V endMoving()... $(document).off("mouseup touchend", endMoving); $(document).off("mousemove touchmove", pohyb);

Vzhledem k tomu, že máme připojená mobilní zařízení, existuje možnost, že uživatel použije gesto „zmáčknutí“ obrázku prsty, aby jej zmenšil. Existuje jedna velmi pohodlná knihovna s názvem Hammer, která vám umožňuje rozpoznat mnoho gest. Ale protože potřebujeme pouze jeden, napíšeme ho krátce bez dalších skriptů.

Možná jste si všimli, že funkce saveEventState je již uložena v dotykových informacích. Teď to budeme potřebovat.

Nejprve zkontrolujeme přítomnost „dvou dotyků“ a vzdálenost mezi nimi. Díváme se také na to, zda se při pohybu zmenšuje vzdálenost mezi nimi. Nyní aktualizujeme přesun:

Pohyb = function(e)( var mouse=(), dotyky; e.preventDefault(); e.stopPropagation(); dotyky = e.originalEvent.touches; mouse.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(mys.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop( $container.offset( "); left": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // Sledujte gesto přiblížení sevřením při pohybu if(event_state. dotyky && event_state.touches.length > 1 && touches.length > 1)( var width = event_state.container_width, height = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = stav_udalosti.dotyky.klientY - stav_udalosti.dotyky.klientY; b var dist2 = Math.sqrt(a + b); var ratio = dist2 /dist1; šířka = šířka * poměr; výška = výška * poměr; // Pro zlepšení výkonu můžete omezit, jak často se resizeImage() nazývá resizeImage(width, height); ));

Na základě těchto údajů zmenšíme nebo zvětšíme náš obrázek a upravíme jeho výšku a délku.

To je vše. Můžete otevřít

V některých případech se obsah bloku objeví mimo hranice prvku a překrývá jej. Ke kontrole chování blokové prvky používá se vlastnost overflow, která určuje, jak se má zobrazit obsah přesahující hranice bloku.

Pomocí vlastnosti clip můžete oříznout prvek na zadané rozměry.

1. Vlastnost přetečení

Obsah prvků bloku může přetékat blok, když má blok explicitně výšku a/nebo šířku. Bez určení výšky se blok natáhne, aby se přizpůsobil obsahu, pokud není umístěn na pozici: absolutní; nebo poloha: pevná; . Text může přetékat blok na výšku, obrázky - na výšku a šířku.

Hodnoty:
viditelné	Výchozí hodnota. Veškerý obsah bude viditelný bez ohledu na velikost bloku kontejneru. Je možné překrývat obsah sousedních bloků.
svitek	Přidá posuvníky do oblasti zobrazení prvku, které se zobrazí, i když se obsah vejde do bloku. Rozměry nádoby se nemění.
auto	Přidává posuvníky pouze v případě potřeby.
skrytý	Skryje obsah, který přesahuje hranice bloku. Může skrýt nějaký obsah. Používá se pro kontejnerové bloky obsahující plovoucí prvky. Zabraňuje také zobrazení pozadí nebo ohraničení pod plovoucími prvky (které mají plovoucí: left/right; vlastnost nastavenou. Tím se nezmění velikost kontejneru.

Rýže. 1. Ořízněte obsah bloku pomocí vlastnosti přetečení Syntaxe: div ( šířka: 200px; výška: 150px; přetečení: skryté; )

2. Vlastnost Overflow-x

Tato vlastnost určuje, jak bude pravý okraj obsahu uvnitř bloku oříznut, pokud přeteče.

Syntax:

Div ( overflow-x: skryté; )

3. Vlastnost přetečení-y

Tato vlastnost určuje, jak bude oříznut spodní okraj obsahu uvnitř bloku, pokud přeteče.

Syntax:

Div (overflow-y: skryté; )

4. Vlastnost klipu

Tato vlastnost určuje, jak velká část prvku bude viditelná. Část prvku, která zůstane viditelná po oříznutí, se nazývá oblast oříznutí. Oříznutí se aplikuje na prvek, který je zpočátku plně viditelný. Tato vlastnost se vztahuje na prvky, které mají vlastnost position nastavenou na absolutní nebo pevnou.

Ahoj všichni, jmenuji se Anna Blok a dnes si povíme, jak oříznout obrázky bez použití grafických programů.

Kde to může být užitečné?

Především na webech, kde obsah s obrázky s největší pravděpodobností nebude ořezán pro žádný konkrétní blok.

Pozoruhodný příklad: blog na WordPressu.

Řekněme, že chcete, aby obálka vašeho článku měla poměr stran 1:1 (čtverec). Vaše akce:

1. Stáhněte si vhodný obrázek z internetu;
2. Ořízněte jej ve Photoshopu na požadované proporce;
3. Publikovat článek.

Když stránku navštívíte, uvidíte výsledek, který jste očekávali.

Ale předpokládejme, že jste zapomněli oříznout obrázek ve Photoshopu a stáhli si náhodný obrázek jako obal z internetu, co se stane potom?! Přesně tak, rozložení se rozbije. A pokud jste CSS vůbec nepoužili, pak HD obrázek může zcela zablokovat celý pohled na text. Proto je důležité mít možnost oříznout obrázky, když Nápověda CSS styly.

Podívejme se na různé situace, jak to lze implementovat nejen pomocí CSS, ale také SVG.

Příklad 1

Zkusme oříznout obrázek, který je umístěn pomocí background-image. Pojďme si vytvořit malé HTML značení

Pojďme ke stylování CSS. Pomocí background-image přidáme obrázek, určíme rámečky pro náš obrázek, vycentrujeme obrázek pomocí background-position a nastavíme velikost pozadí:

jpg); pozadí-pozice:střed uprostřed; background-size:cover; šířka:300px; výška:300px; )

Toto byla první a nejjednodušší metoda pro oříznutí obrázku. Nyní se podívejme na druhý příklad.

Příklad 2

Předpokládejme, že máme stále stejný box kontejner, uvnitř kterého je img tag s obrázkem, který nyní upravíme.

Náš obrázek také vycentrujeme vzhledem k objektu, který vytvoříme. A používáme vlastnost, která se používá poměrně zřídka: object-fit .

Box ( position: relativní; overflow:hidden; width:300px; height:300px; ) .box img ( position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); šířka:300px výška:300px;

Podle mého názoru je to tak nejlepší metoda. Pro blogy je ideální, pokud pro příspěvky používáte obrázky zcela jiných rozměrů.

Více o HTML a CSS se můžete dozvědět zde:

Příklad 3

U obrázků můžeme v tuto chvíli také vytvořit ořez, pokud je vložíme do prvků SVG. Vezměme si jako příklad kruh. SVG můžeme vytvořit pomocí značek. Vytvořte značku svg border, která bude obsahovat značku kruhu a značku vzoru. Do značky vzor napíšeme značku obrázku. V něm určíme atribut xlink:href a přidáme obrázek. Přidáme také atributy width a height. Ale to není vše. Budeme muset přidat hodnotu výplně. Aby byla naše práce považována za dokončenou, přidáme do značky obrázku pomocný atribut zachováníAspectRatio, který nám umožní vyplnit náš obrázek „od začátku do konce“ kolem celého kruhu.

Tuto metodu nemohu nazvat univerzální. Ale lze jej použít ve výjimečných případech. Pokud bychom se například dotkli tématu blogu, pak by tato metoda mohla ideálně zapadnout do avatara autora, který článek píše.

Více o HTML a CSS se můžete dozvědět zde:

Výsledek:
Podívali jsme se na 3 způsoby oříznutí obrázků na webových stránkách: pomocí obrázku na pozadí , pomocí značky img a spojeného se vzorem svg s vložením rastrové obrázky pomocí značky obrázku. Pokud znáte nějaké další metody pro oříznutí obrázku pomocí SVG, podělte se o ně v komentářích. Bude užitečné nejen pro mě, ale i pro ostatní, aby o nich věděli.

Nezapomeňte se zeptat profesionálů na FrontendHelp online na vaše otázky týkající se rozvržení nebo vývoje front-endu.

Praxe implementace procesu adaptace obrazu je stále ve vývoji. Existuje velký počet nápady a návrhy, jak obrázky zpracovat.

V tuto lekci Podíváme se na úhlednou malou knihovnu, která nejenže umožňuje automaticky měnit velikost obrázků při změně nastavení výřezu, ale také umožňuje ořezávat obrázky na základě daného ohniska. Všechny akce jsou navíc prováděny v čistém CSS.

Seznamte se s kontaktním místem

Focal Point – projekt GitHub a CSS knihovna? vytvořil Adam Bradley. Koncept odezvy vyžaduje, aby obrázky změnily velikost a polohu, aby bylo dosaženo optimálních proporcí pro aktuální výřez. Focal Point posouvá tuto myšlenku o krok dále a obrázky nejen mění, ale také je ořezává.

Problém s tímto nápadem je, že náhodné oříznutí může odstranit důležité části obrázku! Například ve výše uvedeném příkladu je důležitý objekt na pravé straně obrázku. Jak zabránit jeho odříznutí?

Ohniskový bod umožňuje nastavit cílovou oblast obrázku, která by měla zůstat nedotčená (ohniskový bod). Tímto způsobem, když knihovna provede oříznutí, samotné obrázky budou stále vypadat skvěle.

Jak to funguje?

Implementace Focal Pointu je zcela unikátní, ale zároveň jednoduchý proces. Nejprve probereme, jak vybrat ústřední bod, a poté se vrhneme na implementační kód.

Když vložíte obrázek na webovou stránku pomocí Focal Point, automaticky se rozdělí na neviditelnou mřížku 12x12. Nezáleží na velikosti obrázku, mřížka se mu přizpůsobí.

Nyní máme systém pro dělení obrazu a můžeme určit bod na mřížce, který bude sloužit jako ohnisko. Při oříznutí obrázku bude zadaný bod použit jako centrální část, kolem které dojde k oříznutí. To znamená, že pokud vybereme obličej muže, pak tento důležitý aspekt obrazu zůstane i po provedení změn.

Musíte najít důležitou oblast a poté spočítat počet jednotek mřížky od středu obrázku k ní. V našem příkladu je plocha umístěna tři jednotky vpravo a tři jednotky výše od středu mřížky (anglické názvy jsou na obrázku ponechány, protože se shodují s pracovními parametry knihovny).

Kód

Nyní můžeme specifikovat ústřední bod a je čas porozumět implementačnímu kódu. Chcete-li začít, stáhněte si projekt z GitHubu a propojte soubor CSS s dokumentem HTML.

Po předběžných operacích musíte přidat dva prvky div a značku img. Ano, označení se pro jeden obrázek ukazuje jako nadbytečné a tato skutečnost je nevýhodou knihovny. Zde je typické označení:

Jak vidíte, vnější prvek div má třídu „ ohnisko“ a ten vnitřní obsahuje náš obraz bez jakýchkoli tříd.

Převod jednotek mřížky na třídy

Nyní musíte nasměrovat Focal Point na místo, kde je ohnisko obrazu. Naše ohnisko je posunuto o tři jednotky doprava a o tři jednotky nahoru. Proto specifikujeme třídy „ vpravo-3" A " nahoru-3″.

Implementace našeho kódu bude mít za následek: velké obrazovky obrázky se zobrazí v plné velikosti a když se výřez zmenší, zmenší se oříznutím kolem ohniska.

Všimněte si, že obrázek vpravo je nejen menší, ale také oříznutý kolem důležité části. Vše se děje pomocí CSS!

Struktura stránky

Abychom si lépe představili použití knihovny v reálných aplikacích, postavme si jednoduchou stránku.

Pojďme definovat prvek div s třídou “ sloupec”:

Přidejme nadpis a odstavec, abychom simulovali obsah stránky:

Dále vložíme obrázek, jak je ukázáno v předchozím příkladu (se dvěma divy a třídami pro ohnisko):

Pro dokončení příkladu zkopírujeme kód pomocí jiného obrázku a jiného zaostřovacího bodu.

U druhého obrázku je ohnisko na jiném místě:

CSS

Pojďme definovat styly pro naši stránku. Adaptace obrázků a práce s ohniskem jsou mimo naši oblast odbornosti. Vše, co musíte udělat, je určit vzhled Prvky. Stránka je například rozdělena do dvou sloupců a textu jsou nastaveny styly.

* ( margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box „ dole: 20px barva: #888; písmo: 14px/1.5 Helvetica, Verdana, sans-serif; @media all and (max-width: 767px) ( p ( font-size: 12px; ) h1 ( font-size: 35px;) ) @media all a (maximální šířka: 550px) ( h1 (velikost písma: 23px; ) )

Podívejme se na to v akci

Nyní se můžete podívat, jak demo funguje. Pokud se stránky zobrazují ve velkém zobrazovacím okně (například na obrazovce monitoru) stolní počítač), pak se obrázky zobrazí celé:

Nyní, pokud zmenšíte velikost výřezu nebo se podíváte na ukázkovou stránku s mobilní zařízení, můžete vidět, jak se obrázky přizpůsobují. Jak se okno zmenšuje, obrázky jsou nejen menší, ale také oříznuté.

Jak efektivní je tato technika z hlediska designu!? Čím menší je obraz, tím více vynikne ohnisko. S touto knihovnou si můžete být jisti, že i na malých obrazovkách budou mít uživatelé důležité informace.

Kompatibilita s prohlížečem

Knihovna funguje ve všech nových prohlížečích. V IE8 jsou obrázky změněny, ale nejsou oříznuty. Ale v tuto chvíli 99,99 % webů nemá takový mechanismus přizpůsobení obrazu s automatickým oříznutím, takže odezva IE8 není kritická.

Co je uvnitř?

Nyní se podívejme, jak knihovna funguje.

První část kódu je základní řešení CSS pro responzivní obrázky.

Ohnisko ( šířka: 100 %; výška: auto; přetečení: skryté; ) .focal-point img ( šířka: 100 %; max. šířka: 100 %; výška: auto; -ms-interpolační-režim: bikubický; ) .focal-point div ( poloha: relativní; max. šířka: žádná; výška: auto; )

Následující kód je trochu složitější. Nejprve je mediální dotaz implementován na 767px. Poté se k oříznutí obrázku použijí záporné hodnoty okrajů pro každou z dostupných tříd. V textu lekce uvádíme pouze třídy “ nahoru-3" A " vpravo-3″, které byly použity v demonstraci.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Výchozí) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Celkem 6em) */ .up-3 div ( margin-top: -1,5 em; margin-bottom: -4,5 em; ) .right-3 div ( margin-left: -6 em; margin-right: -2 em; ) )

Není zde mnoho kódu, ale je to docela elegantní. Záporné okraje se používají s jednotkami em k oříznutí obrázků kolem daného bodu.