Get the App
SLTechnology News&Howtos  ›  Development  › 

How to stretch a picture in css style

Shulou Source: shulou.com Published: 2022-06-02 08:20:52 10月03日 Update

This article mainly explains "how to stretch a picture in the css style". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to stretch a picture in the css style.

In css, you can use the transform attribute to stretch the picture. When the value of this attribute is "scale ()", you can stretch the picture element by adding "transform:scale (horizontal stretch ratio, Vertical stretch ratio);" style to the picture element.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to stretch a picture in css style

In css, you can use the transform attribute to stretch the picture, and the transform attribute rotates, scales, moves, or tilts the element.

When the value of the property is scale (), the picture can be stretched.

Examples are as follows:

Document .img2 {transform:scalex (2);} .img3 {transform:scalex (3);}

Output result:

Thank you for your reading, the above is the content of "how to stretch pictures in css style", after the study of this article, I believe you have a deeper understanding of how to stretch pictures in css style, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Tags: Pictures styles attributes elements learning content that is scale function ideas situations tutorials articles more horizontal environment computers knowledge knowledge points examples Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno MariaDB NVidia Xiaomi macOS Shulou Information