How to set image stretching in css

How to set image stretching in css: first create an html page; then add a div tag to the HTML page, and add an img image tag inside the tag; then directly write the css in the div tag Style; finally set the height and width of the image to 100%.

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

Open vscode and create an html page to demonstrate how css stretches the image settings according to the resolution. If you don't have vscode, you can use other HTML editors or even text files. Just note that the suffix of the file must be .html

in the same level directory of the test page , add a demonstration picture. In order to demonstrate the effect, the resolution of the picture is relatively small.

Add a div tag to the test page and add an img image inside the tag. tag, set the src address of the image to the demo image added in the previous step. Open this test page in the browser, and you can see the image presented on the browser

In the div tag, write the CSS style directly, set the width of the div to 500 pixels, the height to 300 pixels, and the border to a 1-pixel red box. Open it in the browser again, and you can see the picture, which does not fill the entire div space

[Recommended learning: css video tutorial]

Note: This Write the css style directly into the tag, which is called inline style. It has the same effect as the css written outside.

At this time, if you want the image to fill the entire div, Just set the height and width of the image to 100%. For demonstration purposes here, all img tags are set to 100%, and the writing form of external css is used. From the display effect of the browser, you can see that the image stretches and fills the entire div space

What if the image uses a background image and is not in the form of an img tag? ? If shown, the image will be repeated on the x and y axes by default and will not be stretched. It will still fill the space of this div

If you want a background image, you can also To stretch to fill the entire div space, you need to set the background-size of the background image: 100% 100%; As can be seen from the running effect, the effect of automatic stretching according to the resolution is indeed achieved

The above is the detailed content of How to set image stretching in css. For more information, please follow other related articles on the PHP Chinese website!