Shulou(Shulou.com)06/02 Report--

This article mainly explains the "web picture center processing method is what", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "web picture center processing method is what" it!

When we use mobile APP, especially some information APP, we will have related UI shown in pictures, such as Jinri Toutiao APP's single-large image and three-image mode, as shown below:

Three pictures:

Or the effect of a 9-grid picture like Weibo or moments, as shown below:

For these pictures, if you simply think that you can directly use a few pictures

Configure the src address and then render it on the page, that would be a big mistake

For this type of UI presentation, we need to be clear about the following:

After uploading pictures, there will be different sizes, some are long pictures (grow up to be wide), some are wide pictures (width is greater than long), or some are close to square pictures.

In the case of ensuring the original aspect ratio of the picture, in order to display the picture in a square area, or in a fixed area of length and width, it is necessary to intercept part of the picture to display.

This effect can be achieved with either CSS or JavaScript.

You can take a look at the following pictures, the red one is the picture itself, and the dotted frame is the area displayed, which is easy to understand: wide picture:

Long picture:

Background-size of CSS:

If we use CSS alone, we can easily achieve the above effect. The main attribute we make use of is background-size, which we can understand conceptually first:

Background-size: length | percentage | cover | contain

Length: sets the height and width of the background image. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto".

Percentage: sets the width and height of the background image as a percentage of the parent element. The first value sets the width and the second value sets the height. If only one value is set, the second value is set to "auto".

Cover: on the premise of maintaining the aspect ratio of the image, to fit the entire container and scale the image to the minimum size that will completely cover the background positioning area. The advantage is that the background image completely covers the area of the element to which it belongs; the disadvantage is that the excess will be hidden.

Contain: in contrast to cover, the aspect ratio of the image is maintained to fit the entire container, and the image is scaled to the maximum size that fits the background positioning area. The advantage is that the picture will not be deformed, and the background image is fully displayed; the disadvantage is that the background white space occurs when the aspect ratio of the element is different from that of the background image.

We can use background-size:cover; is more appropriate, in the case of ensuring the aspect ratio, if the picture exceeds the background area, the excess part can be hidden, while setting background-position: center center; to center the main content.

Object-fit of CSS:

New to HTML5

The attribute object-fit of the tag can also meet the requirements, but pay attention to compatibility.

Object-fit: fill | contain | cover | scale-down | none | initial | inherit

The following attributes are mainly used:

Fill: by default, the original proportion is not guaranteed, and the content stretches the entire content container.

Contain: keep the original size ratio, the content is scaled, refer to background-size:contain.

Cover: keep the original size ratio, but some of the content may be cut, refer to background-size:cover.

Scale-down: keep the original size ratio. The size of the content is the same as that of none or contain, depending on who gets a smaller, smarter object between them.

Code effect demo:

If it is a single large image, we can directly set background-image for a div, and then set background-image. The code is as follows:

. one-img {

Width: 100%

Padding-top: 50%

Background-image: url ('https://gpic.qpic.cn/gbar_pic/osL7w6JTehzgKuaKrPEJ8V3lia1zoLaPShY05MdBofOpBye0yNpRXYA/');

Background-size: cover

Background-position: center center

}

The effect is as follows:

The picture in the code comes from the network.

Here is a knowledge point. If we want to achieve screen adaptation, the length and width of div must not be written as a fixed value px, so the width can be set to 100%. In this way, if the picture itself becomes larger under a large screen, but we cannot set an appropriate percentage of height. Here we use the padding-top property to set padding-top to a percentage, so that the height of a div can be stretched out. The specific value is based on the value of the width, which means 50% of the width (width:100%).

Three consecutive pictures, the code is as follows:

.three-img-wrap {

Margin-top: 5px

Width: 100%

Overflow: hidden

}

. three-img {

Float: left

Width: 33.3333%

Padding-top: 33.3333%

Border-right: 1px solid # fff

Background-size: cover

Background-position: center center

Box-sizing: border-box

}

The effect is as follows:

For each div, set float:left to achieve horizontal tiling. Note that display:inline-block is not recommended here. There will be gaps. If you want to achieve 9 grid, you can make 2 copies of these 3.

Or another 3 / 2 / 1 display diagram, the code is as follows:

.three-img-other-wrap {

Margin-top: 5px

Width: 100%

Overflow: hidden

}

.three-img-other-1 {

Width: 66.6666%

Padding-top: 66.6666%

Float: left

Border-right: 1px solid # fff

Background-size: cover

Background-position: center center

Box-sizing: border-box

}

.three-img-other-2 {

Width: 33.3333%

Padding-top: 33.3333%

Float: left

Border-bottom: 1px solid # fff

Background-size: cover

Background-position: center center

Box-sizing: border-box

}

.three-img-other-3 {

Width: 33.3333%

Padding-top: 33.3333%

Float: left

Background-size: cover

Background-position: center center

Box-sizing: border-box

}

The effect is as follows:

The problem of stitching between pictures:

From the above effect picture, there is a certain distance between each picture (usually between 1px-3px). If we use margin to implement it here, we cannot set a specific value, because our length and width are all in percentage, and margin must also use percentage, otherwise there will be confusion, but margin is not suitable to use percentage in this scenario. So we use the border border to simulate this spacing:

Border-right: 1px solid # fff

Box-sizing: border-box

Note that box-sizing: border-box;, so that the length of border will be calculated in the entire width, that is, the percentage of border+width equal to the specific setting.

Use JavaScript to achieve:

In fact, in terms of the elegance of the code, using the pure Css method we explained above is a better method, but it also has disadvantages: 1. Unable to listen for picture load success and failure events, such as onerror or onload. As a result, we will not be able to give a default display to the image that failed to load. two。 When we implement the logic of lazy loading of pictures, div+background-image intersects in this way

The way needs to write more logic.

Here, I would like to introduce div+background-image and

The difference between:

In the process of loading a web page, the image background-image with a css background image will not load until the structure is loaded (after all the contents of the page are displayed), and the tag img in html is part of the structure of the page will be loaded in the process of loading the structure. In other words, the page will load the tag first.

Content, and then load the background picture background-image, if you use to introduce a large picture, then before the picture download is complete

The later content will not be displayed. If you use css to introduce the same image, the background image will not be loaded until the structure and content of the page are loaded, which will not affect your browsing of the web content.

If we want to use JavaScript plus

To achieve this effect, the basic logic is

First of all, you need to know the width and height of the picture.

For each.

After setting up src, you need to set a parent div to wrap this at the same time

.

At the same time, the parent div needs to set overflow:hidden, and then dynamically set it according to the size of the frame and the width and height of the picture.

Margin or left,top to generate displacement.

The core here is how to dynamically calculate the displacement of the image according to the width and height of the frame. We can encapsulate a method to calculate it. The specific logic can be found in the notes:

GetImagePosition (img, cW, cH) {

/ / cW is the width of the frame, / / cW is the height of the frame

Img.marginTop = img.marginLeft = 0

/ / img.h represents the height of the picture itself, and img.height represents the height after the calculation setting.

/ / img.w represents the height of the picture itself, and img.width represents the height after the calculation setting.

Img.width = cW

Img.height = cH

/ / the width of the long picture is set first, and then the long picture is centered

If (img.h * cW / img.w > cH) {

Img.height = img.h * cW / img.w

Img.marginTop = (cH-img.height) * 0.5 / / 0.5 indicates center

} else {/ / the width map sets the height first, and then the width map is centered

Img.width = img.w * cH / img.h

Img.marginLeft = (cW-img.width) * 0.5 / / 0.5 indicates center

}

Return img

}

After calculating the image displacement, the width and height of the frame can also be dynamically set using JavaScript, such as 1/3 of the screen width or 2/3 of the picture width. The code is as follows:

Document.body.clientWidth * 0.5

Document.body.clientWidth * 2 / 3

Thank you for your reading, the above is the "web picture center processing method is what" the content, after the study of this article, I believe you on the web picture center processing method is what this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.