How to scale images proportionally with css

Css method to scale images proportionally: You can use the object-fit attribute to achieve this, such as [object-fit: cover;]. The object-fit attribute specifies how the element's content should fit within the height and width of the specified container.

Attribute introduction:

The object-fit attribute specifies how the content of the element should adapt to the height and width of the specified container.

(Learning video sharing: css video tutorial)

object-fit is generally used for img and video tags. Generally, these elements can be cut while retaining the original proportions. , zoom or stretch directly, etc.

Syntax:

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

Attribute value:

• fill Default, original proportion is not guaranteed, content is stretched Fills the entire content container.

• contain Maintain the original size proportions. Content is scaled.

• cover Maintain the original size proportions. However, some content may be cut.

• none Retains the length and width of the original element content, which means the content will not be reset.

• scale-down Maintain the original size ratio. The size of the content is the same as either none or contain , whichever of the two results in a smaller object.

• initial Set to the default value

• inherit Inherit attributes from the element's parent element.

Example:

Cut the image and keep the original proportions:

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

Related recommendations: CSS tutorial

The above is the detailed content of How to scale images proportionally with css. For more information, please follow other related articles on the PHP Chinese website!