In some cases, the block's contents appear outside the element's boundaries, overlapping with it. To control the behavior of block-level elements, use the overflow property, which determines how content that extends outside the block should be displayed.

Using the clip property, you can crop an element to specified dimensions.

1. Overflow property

The content of block elements can overflow the block when the block has an explicit height and/or width. Without specifying a height, the block will stretch to accommodate the content unless the block is positioned at position: absolute; or position: fixed; . Text can overflow the block in height, images - in height and width.

Values:
visible	Default value. All content becomes visible regardless of the size of the container block. It is possible to overlap the contents of adjacent blocks.
scroll	Adds scroll bars inside the element's display area that appear even when the content fits inside the block. The container dimensions do not change.
auto	Adds scrollbars only when necessary.
hidden	Hides content that extends beyond the boundaries of the block. May hide some content. Used for container blocks containing floating elements. Also prevents backgrounds or borders from being displayed under floating elements (that have the float: left / right; property set. This does not resize the container.

Rice. 1. Crop the block content using the overflow property Syntax: div ( width: 200px; height: 150px; overflow: hidden; )

2. Overflow-x property

The property specifies how the right edge of the content inside the block will be cut off if it overflows.

Syntax:

Div ( overflow-x: hidden; )

3. Overflow-y property

The property specifies how the bottom edge of the content inside the block will be trimmed if it overflows.

Syntax:

Div (overflow-y: hidden; )

4. Clip property

The property determines how much of the element will be visible. The part of the element that remains visible after trimming is called the clipping region. Clipping is applied to an element that is initially fully visible. The property applies to elements that have their position property set to absolute or fixed .

The practice of implementing the image adaptation process is still under development. There are a large number of ideas and suggestions on how to process pictures.

In this tutorial we'll look at a neat little library that not only allows you to automatically resize images when you change viewport settings, but also crops images based on a given focal point. In addition, all actions are carried out in pure CSS.

Meet Focal Point

Focal Point - GitHub project and CSS library? created by Adam Bradley. The concept of responsiveness requires images to change size and position to achieve optimal proportions for the current viewport. Focal Point takes this idea a step further and not only resizes images, but also crops them.

The problem with this idea is that random cropping can remove important parts of the image! For example, in the example above, the important object is on the right side of the image. How to prevent it from being cut off?

Focal Point allows you to set the target area of ​​the image that should remain intact (focal point). This way, when the library performs cropping, the images themselves will still look great.

How it works?

Implementing Focal Point is quite a unique, but at the same time simple process. Let's first discuss how to select the focal point, and then dive into the implementation code.

When you insert an image into a web page using Focal Point, it is automatically divided into an invisible 12x12 grid. It doesn't matter what size the picture is, the grid adapts to it.

Now we have a system for dividing the image and we can determine a point on the grid that will serve as the focal point. When cropping a picture, the specified point will be used as the central part around which the cropping occurs. That is, if we select the man's face, then this important aspect of the image will remain after making changes.

You need to find the important area, then count the number of grid units from the center of the image to it. In our example, the face is located three units to the right and three units up from the center of the grid (English names are left in the figure, since they coincide with the working parameters of the library).

Code

Now we can specify the focal point and it's time to understand the implementation code. To get started, download the project from GitHub and link the CSS file to your HTML document.

After the preliminary operations, you need to add two div elements and an img tag. Yes, the markup turns out to be redundant for one image, and this fact is a disadvantage of the library. Here's a typical markup:

As you can see, the outer div element has the class “ focal point”, and the inner one contains our image without any classes.

Converting grid units to classes

Now you need to point the Focal Point to the place where the focus of the image is. Our focal point is shifted three units to the right and three units up. Therefore, we specify the classes “ right-3" And " up-3″.

The implementation of our code will lead to the fact that on large screens the images will be displayed at full size, and when the viewing window is reduced, they will be reduced in size with cropping around the focal point.

Note that the image on the right is not only smaller, but also cropped around an important part. Everything is done using CSS!

Page structure

In order to better imagine how to use the library in real applications, let's build a simple page.

Let's define a div element with the class “ column”:

Let's add a title and paragraph to simulate the content of the page:

Next, we'll insert an image as shown in the previous example (with two divs and classes for the focal point):

To complete the example, let's copy the code using a different image and a different focus point.

For the second image, the focal point is in a different location:

CSS

Let's define styles for our page. Adapting images and working with a focal point are outside our area of ​​expertise. All you need to do is determine the appearance of the elements. For example, the page is divided into two columns and styles are set for the text.

* ( margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; ) .column ( float: left; overflow: auto; padding: 20px; width: 50%; ) h1 ( text-transform: uppercase; font: bold 45px/1.5 Helvetica, Verdana, sans-serif; ) p ( margin- bottom: 20px; color: #888; font: 14px/1.5 Helvetica, Verdana, sans-serif; ) @media all and (max-width: 767px) ( p ( font-size: 12px; ) h1 ( font-size: 35px; ) ) @media all and (max-width: 550px) ( h1 ( font-size: 23px; ) )

Let's see it in action

Now you can see how the demo works. If pages are displayed in a large viewing window (for example, on a desktop computer monitor), then the images will be displayed in full:

Now, if you reduce the size of the viewport or view the demo page from a mobile device, you can see how the images adapt. As the window shrinks, the images are not only smaller, but also cropped.

From a design point of view, how effective is this technique!? The smaller the image becomes, the more the focal point stands out. With this library you can be sure that even on small screens users will have important information.

Browser compatibility

The library works in all new browsers. In IE8, images are resized but not cropped. But at the moment, 99.99% of sites do not have such an image adaptation mechanism with automatic cropping, so the response of IE8 is not critical.

What's inside?

Now let's look at how the library works.

The first part of the code is a basic CSS solution for responsive images.

Focal-point ( width: 100%; height: auto; overflow: hidden; ) .focal-point img ( width: 100%; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; ) .focal-point div ( position: relative; max-width: none; height: auto; )

The following code is a little more complicated. First, the media query is implemented at 767px. Then, negative margin values ​​for each of the available classes are used to crop the image. In the text of the lesson we present only the classes “ up-3" And " right-3″ that were used in the demonstration.

@media all and (max-width: 767px) ( /* 4x3 Landscape Shape (Default) */ .focal-point div ( margin: -3em -4em; ) /* Landscape up (Total 6em) */ .up-3 div ( margin-top: -1.5em; margin-bottom: -4.5em; ) .right-3 div ( margin-left: -6em; margin-right: -2em; ) )

There's not a lot of code here, but it's quite elegant. Negative margins are used with em units to crop images around a given point.

Description

The clip property specifies the area of ​​the positioned element in which its contents will be displayed. Anything that does not fit into this area will be cropped and become invisible. At the moment, the only available area shape is a rectangle. Everything else remains only in dreams. clip only works for absolutely positioned elements.

Syntax

clip: rect(Y1, X1, Y2, X2) | auto | inherit

Values

The values ​​used are the distance from the edge of the element to the clipping area, which is set in CSS units - pixels (px), em, etc. If the edge of the area needs to be left unchanged, you should set it to auto , the position of the remaining values ​​is shown in Fig. 1.

Rice. 1. Clip property values

HTML5 CSS2.1 IE Cr Op Sa Fx

The result of this example is shown in Fig. 2.

Rice. 2. Using clip in the Safari browser

Object model

document.getElementById("elementID ").style.clip

Browsers

Internet Explorer up to and including version 7.0 works with a different form of notation, in which coordinate values ​​are separated by a space rather than a comma - clip : rect(40px auto auto 40px) . Also, Internet Explorer up to and including version 7.0 does not support the inherit value.

Often there is a need to display images in a block of a fixed size. In this case, a problem arises: how insert an image into a block without loss of proportion.

Most blogs recommend writing JavaScript code that will calculate picture dimensions and scale it to the required size. But this is not our method. Linking to js code is not a good idea. In addition, the script will remain inactive until the images are fully loaded. Accordingly, the page will be crooked for some time.

Of course, you can trim and scale pictures before adding them to the site. but launching the editor every time and cropping the image pixel by pixel is also not good. Therefore, I suggest using the usual CSS, and crop the picture with the help of him. In this case, trimming will occur vertically. That is, the width of the picture will fit completely, but the height will be cut off.

The essence of this method is that the picture will be fit into a block of a certain size. Everything that does not fit into this block will be hidden. The border block will have the same properties as the picture. Therefore, it can be positioned and aligned in the same way as a regular picture. The option, of course, is not ideal, but it is effective.

First, let's select patients. I included pictures of three felines of different proportions. All images have the same width - 200 pixels.

height = 198px

height = 257px

height = 124px

With such a difference picture proportions The best option would be to take a border block measuring 200x120 pixels.

After all the CSS manipulations it will look like this:

The code for this example is:

.jpg" width="200" alt="Picture 1" border="0">!}

.jpg" width="200" alt="Picture 2" border="0">!}

.jpg" width="200" alt="Picture 3" border="0">!}

As you can see, the pictures were not distorted, but only cropped. Although in fact they remained full-size. This method will be very successful if the difference in the proportions of your pictures is small.

That's all. Subscribe, put stars! Good luck in your achievements!

Off-topic. The very best thing on Earth.

You can join my microblog on Twitter

Let's look at three simple methods you can use to show only part of an image on your website. Note that with the help of these methods, the image is not cropped to a certain size in the literal sense, but only the part of it that we need to see is shown and the unnecessary area is hidden.

These methods can be very useful if you need to resize an image or create a preview, for example, in a news feed, etc.

Method 1: Using Negative Margins

The image must be placed in a parent element, in our case a div. The parent element must be a floated element (or with a specified width). The method will not work on block-level or full-width elements.

Let's set negative margins for all four sides: top (top), right (right), bottom (bottom) and left (left). Negative margins determine how much the parent element's image is cropped in each direction. Next, we'll set the parent element's overflow property to hidden to hide the margins that are behind the cropped image area.

<div class = "crop" >

Crop

float: left;

overflow: hidden;

Crop img

margin : -70px -50px -160px -175px ;

Method 2: Using absolute positioning

Using this method, we set the width and height of the parent element, and set the position property to relative. The width and height determine the dimensions of the displayed field. For an image inside a parent element, set the positioning property to absolute. Then, using the top and left properties, we set which part of the image to show.

<div class = "crop" >

Crop

float: left;

overflow: hidden;

position: relative;

width: 270px;

height: 260px;

Crop img

position: absolute;

top: -70px;

left: -175px;

Method 3: Using the slip property

This method is the simplest, since the clip property determines the part of the element that needs to be shown. But this method has two drawbacks.

First, the cropped element must be positioned absolutely. So we'll have to add an extra element, calculate the size of the visible area of ​​the image, add that size, and set the float property to the parent.

Secondly, the size of the visible area is not reduced to the size of the cut out part, but remains equal to the size of the entire image (the area outside the cut out part is only hidden). We must use absolute positioning to move the visible area to the top left corner of the parent.

<div class = "crop" >

Crop

float: left;

position: relative;