You don’t have to look for a UI to make CSS look good

In actual development process, always encounter all sorts of need to deal with images, for example, users to upload image, we all know that head high proportion of the there is a wide, but the picture of the user, if the simple according to our set wide high, according to the image distortion is inevitable, so how to deal with?

This time we need to use a CSS property, “object-fit.”

<div class='header-container'>
     <img src="./333.jpg" alt="">
</div>
<img src="./333.jpg" alt="" style='height: 100px; '>
Copy the code

.header-container{
    width: 100px;
    height: 100px;
    border: 1px solid # 333;
    border-radius: 50%;
 overflow: hidden; } .header-container img{  width: 100%;  height: 100%; } Copy the code

It is not hard to see that the top image is stretched compared to the bottom image, so all you need to do is add an attribute to img “object-fit: cover;”

The effect is as follows:

How much do you know about object-fit properties? Now listen to me in detail.

“Description of object-fit attributes“

According to MDN (object-fill), the “object-fit” CSS attribute specifies how the content of the replaceable element should fit into the box with the height and width specified for its use.

That is to say, the box is fixed in width and height, how the picture will fit in the box.

It has four attribute values:

fill | contain | cover | none | scale-down

Contain: Elements that are being replaced will be scaled to fit the width/height ratio of the box. If the element inside does not match the width/height ratio of the box, a black edge will be generated.

You can see that the left and right sides of the picture above are the so-called black edges because their aspect ratio is not consistent with the frame.

cover: The replaced content fills the element’s entire content box while maintaining its aspect ratio. If the aspect ratio of the object does not match the content box, the object will be tailored to fit the content box.

That is, when the aspect ratio is inconsistent, the cover property value is clipped to fit the container.

Something like this:

fill: The replaced content fills the element’s content box. The entire object will completely fill the box. If the aspect ratio of the object does not match the content box, the object will be stretched to fit the content box.

The fill property is similar to the cover property in that it completely fills the content box, except that “the fill property stretches the element to fit the container.”

As shown below, the height is stretched

scale-down: Size and contentnone 或 containOne of them is the same, depending on which of them gets the smaller object.

It probably depends on the minimum of None and contain. This attribute is not used much.

We can set max-width and max-height to limit the maximum value of the image, usually set to 100% of the outer container. This will allow the image to scale equally and not distort.

Blur the background image, lighten the profile picture, add a drop shadow effect, reverse color, contrast, saturation, etc

You only need to use one cSS3 attribute, filter

The original:

filter: blur(5px);Copy the code
      

filter: contrast(200%);Copy the code
      

filter: grayscale(1);Copy the code
      

For special holidays like Tomb-sweeping Day, a single line of code that turns the entire web gray takes advantage of this property.

filter: hue-rotate(45deg);Copy the code
      

filter: drop-shadow(16px 16px 20px yellow) invert(3%);Copy the code
      

The following describes the individual attribute values of filter

/* URL to SVG filter */
filter: url("filters.svg#filter-id"); 
/* values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* Multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;

Copy the code

• “Url ()” : The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.

• “Blur ()” : Sets the image to gaussian blur. The larger the value, the more blurred it is

• “Brightness ()” : Add a linear multiplication to the image to make it dark/bright, 0 is completely black, or above 100% is bright

• Contrast () : Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons will be applied. If no value is set, the default value is 1.

• “Drop-shadow ()” : Sets a shadow effect on the image. A shadow is an offset version of a mask that can be drawn in a particular color and can have a degree of blurring underneath the image.

• “Grayscale ()” : Converts an image to grayscale. Value defines the scale of the conversion. If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change. Values between 0% and 100% are linear multipliers of the effect. If this parameter is not set, the default value is 0.

• Hue -rotate() : applies hue rotation to an image. Angle sets the color ring Angle at which the image will be adjusted. If the value is 0deg, the image has no change. If the value is not set, the default value is 0deg. While there is no maximum value, anything above 360deg is like going around again.

• “Invert ()” : Inverts the input image. Value defines the scale of the conversion. 100% value is completely reversed. If the value is 0%, the image has no change. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default value is 0.

❤️ encourage

Thank you for reading this article and please give it a thumbs up if you find it useful. Your likes are the biggest support for me. If you have any questions, please feel free to comment.