Home > Article > Web Front-end > 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!