css設置背景圖片大小
Introduction:
介紹：
As we all know that the images are a very responsive yet very creative way to display your web page or website to the users. The images also play a major role in indulging users to websites or web pages. The images are a very smart way to represent any piece of information through colors and art.
眾所周知，圖像是一種向用戶顯示您的網頁或網站的響應Swift但非常有創意的方式。 這些圖像在吸引用戶訪問網站或網頁方面也起著重要作用。 圖像是一種非常聰明的方式，可以通過顏色和藝術品來表示任何信息。
Now that we know the importance and necessity of the images, why don’t we think about the topic at hand which is how can we set the background image size using CSS on our website or web page and to answer that curiosity, keep reading!
現在我們知道了圖像的重要性和必要性，為什么不考慮手頭的話題，那就是我們如何才能在我們的網站或網頁上使用CSS設置背景圖像的大小，并回答這種好奇心，請繼續閱讀！
Method:
方法：
To set the background image size the background-size property of CSS is used.
要設置背景圖像的大小，使用CSS的background-size屬性。
Syntax:
句法：
Element{
background-size:auto|length|cover|contain;
}
Values:
值：
Now that we have a basic idea of this property and how it helps in resizing the image on our website or web page, so let us keep moving forward in this article and get to know about the different values about this property.
現在，我們已經對該屬性有了基本的了解，以及它如何幫助調整網站或網頁上圖像的大小，因此讓我們在本文中繼續前進，并了解該屬性的不同值。
This property contains 4 values to the background-size property and is listed below,
該屬性包含background-size屬性的4個值，并在下面列出，
auto
汽車
length
長度
cover
蓋
contain
包含
Let us discuss these properties one by one.
讓我們一一討論這些屬性。
1)背景大小：自動 (1) background-size:auto)
The auto value of the background-size property is useful to display the original size of the image in terms of length and width. It is also the default value.
background-size屬性的auto值對于顯示圖像的原始大小(長度和寬度)很有用。 也是默認值。
Syntax:
句法：
Element{
background-size:auto;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: auto;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
輸出量
In the above example, auto property value is used.
在上面的示例中，使用了自動屬性值。
2)background-size：length (2) background-size:length)
The length value of the background-size property is useful to display the width and height of the image by the user’s choice. The first value is used to set the width and the second is used to set the height of the image.
background-size屬性的length值可用于根據用戶的選擇顯示圖像的寬度和高度。 第一個值用于設置寬度，第二個值用于設置圖像的高度。
Note: If only one value is given, the second is set to auto by default.
注意 ：如果僅給出一個值，則默認情況下將第二個設置為auto。
Syntax:
句法：
Element{
background-size:width height;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: 600px 200px;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
輸出量
In the above example, the width and length of the image are defined.
在上面的示例中，定義了圖像的寬度和長度 。
3)background-size：cover (3) background-size:cover)
The cover value of the background-size property is useful to resize the original size of the image in terms of length and width to cover the entire container. It can also stretch or cut the image to cover the entire container if needed.
background-size屬性的cover值對于調整圖像的原始大小的長度和寬度非常有用，以覆蓋整個容器。 如果需要，它也可以拉伸或剪切圖像以覆蓋整個容器。
Syntax:
句法：
Element{
background-size:cover;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: cover;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
輸出量
In the above example, the image is cut to fit the container.
在上面的示例中，圖像被裁剪以適合容器。
4)背景尺寸：包含 (4) background-size:contain)
The contain value of the background-size property is useful to resize the original size of the image in terms of length and width to make sure the image is fully visible to the user.
background-size屬性的contain值可用于根據長度和寬度調整圖像的原始大小，以確保用戶完全可見該圖像。
Syntax:
句法：
Element{
background-size:contain;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 25px;
background: url(img_forest.jpg);
background-repeat: no-repeat;
background-size: contain;
color: #fff;
}
</style>
</head>
<body>
<h1> Background image size</h1>
<div>
<h2>Hello World</h2>
</div>
</body>
</html>
Output
輸出量
In the above example, the image is fully visible to the user with the help of background-size: contain.
在上面的示例中，借助background-size：contains ，用戶可以完全看到圖像。
翻譯自: https://www.includehelp.com/code-snippets/how-to-set-background-image-size-using-css.aspx
css設置背景圖片大小
 --字符串比較)
![php 查看擴展 代碼,[擴展推薦] 使用 PHP Insights 在終端查看 PHP 項目代碼質量](http://pic.xiahunao.cn/php 查看擴展 代碼,[擴展推薦] 使用 PHP Insights 在終端查看 PHP 項目代碼質量)
