Home  >  Article  >  Web Front-end  >  How to scale images proportionally with css

How to scale images proportionally with css

王林
王林Original
2020-11-16 11:51:4325589browse

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.

How to scale images proportionally with css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn