Home  >  Article  >  Web Front-end  >  How to set the maximum width and height of an element in css

How to set the maximum width and height of an element in css

WBOY
WBOYOriginal
2021-12-06 15:54:405543browse

Setting method: 1. Use the "max-width" attribute to set the maximum width of the element. The syntax is "element {max-width: element maximum width value;}"; 2. Use the "max-height" attribute Set the maximum height of the element, the syntax is "element {max-width: element maximum height value;}".

How to set the maximum width and height of an element in css

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

How to set the maximum width and height of elements in css

In css, you can use the max-width and max-height attributes to set elements The maximum width and maximum height of the element, the role of the max-width attribute is to define the maximum width of the element, and the role of the max-height attribute is to set the maximum height of the element.

Let’s take an example to see how to set the maximum width and maximum height of an element. The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
p {
    text-indent: 1cm;
    max-width:350px;
    max-height:100px;
    }
</style>
</head>
<body>
<p>
噫吁嚱,危乎高哉!蜀道之难,难于上青天!蚕丛及鱼凫,开国何茫然!尔来四万八千岁,不与秦塞通人烟。西当太白有鸟道,可以横绝峨眉巅。地崩山摧壮士死,然后天梯石栈相钩连。上有六龙回日之高标,下有冲波逆折之回川。黄鹤之飞尚不得过,猿猱欲度愁攀援。青泥何盘盘,百步九折萦岩峦。扪参历井仰胁息,以手抚膺坐长叹。
</p>
<img  src="1118.02.png"  alt="How to set the maximum width and height of an element in css" >
</body>
</html>

Output result:

How to set the maximum width and height of an element in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the maximum width and height of an element in 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