The object-fit attribute specifies how the contents of an element should fit into the specified height and width of the container.

Application example: Click here [Object-fit usage]

I. Basic configuration of Object-FIT attribute test (attached code)

1. Choose an image(1024 * 582)Is greater than the container(200 * 400)Width and height, a picture(150 * 150)Less than container(200 * 400)Wide high.

2. Set the container width and height to 200px and 400px respectively, and set the image width and height to 100%

Ii. Object-fit attribute Value:

1. Fill (as if not used)

Default value, not guaranteed to keep the original scale, content all display full container.

2.contain

Personal understanding: keep the original size proportion, so that the width of the picture fully displayed, height automatically scaled.

3.cover

Personal understanding: Keep the original size ratio. The height is spread across the container, the width is scaled equally, and the excess is cut off.



4.none

Personal understanding: The original width and height of the picture remain unchanged, the excess part is cut off, and the remaining content is kept in the center of the picture.

5.scale-down

Personal understanding: Keep the same ratio. If the actual image width is less than the set image width, the display effect is none. Otherwise, display the same effect as contain.

3. Original drawing of Object-FIT attribute test



4. Object – FIT attribute test code

<style> div {width: 200px; height: 400px; border: 2px solid #f0f; } section {display: flex; justify-content: space-around; } img {width: 100%; height: 100%; } .fill {object-fit: fill; } .contain {object-fit: contain; } .cover {object-fit: cover; } .scale-down {object-fit: scale-down; } .none {object-fit: none; } </style> </head> <body> <h1>object-fit attributes. (container width: 200px and height: 400px, with borders) Select one image that is larger than the container width and one that is smaller than the container width. </h1> <h2> Do not use the broadband height of object-fit images </h2> <section> <div><img SRC ="picture.jpg" Alt ="picture" /></div> <div><img SRC ="zhenji. PNG "Alt ="picture" /></div> </section> <h2>object-fit: fill (default); By default, content is stretched to fill the entire content container, not guaranteed to maintain the original scale. </h2> <section> <div><img class="fill" src="picture.jpg" alt="picture" /></div> <div><img class="fill" src="zhenji.png" alt="picture" /></div> </section> <h2>object-fit: contain; Keep the original size ratio. Content is scaled. </h2> <section> <div><img class="contain" src="picture.jpg" alt="picture" /></div> <div><img class="contain" src="zhenji.png" alt="picture" /></div> </section> <h2>object-fit: cover; Keep the original size ratio. But some content may be cut. </h2> <section> <div><img class="cover" src="picture.jpg" alt="picture" /></div> <div><img class="cover" src="zhenji.png" alt="picture" /></div> </section> <h2>object-fit: scale-down; Keep the original size ratio. The content is the same size as one of None or contain, depending on which of them gets the smaller object. </h2> <section> <div><img class="scale-down" src="picture.jpg" alt="picture" /></div> <div><img class="scale-down" src="zhenji.png" alt="picture" /></div> </section> <h2>object-fit: none; Retain the length and width of the original element content, meaning that the content will not be reset. </h2> <section> <div><img class="none" src="picture.jpg" alt="picture" /></div> <div><img class="none" src="zhenji.png" alt="picture" /></div> </section> </body>Copy the code

Application example: click here [the use of Object-fit] if it is helpful to you, you can follow 👍, we learn the front end together. 😘