Comment définir la largeur minimale et la largeur maximale CSS

Aujourd'hui, je vais vous présenter comment définir la min-width et la max-width de CSS De nombreux amis se demandent quelles sont les styles de largeur minimale et de largeur maximale. Où sont utilisées la largeur minimale et la largeur maximale ? Comment postuler ? Alors aujourd’hui, nous allons vous l’expliquer un par un.

Insérer une image html img dans la page Web dans la disposition DIV+CSS

Ensuite, DIVCSS5 permettra à tout le monde d'apprendre à maîtriser la structure syntaxique de base de min-width et max-width et d'apprendre à l'utiliser via cas.

répertoire min-width max-width

Syntaxe de base CSSStructure

min-width et max-width sont tous deux suivis de nombres spécifiques + html unités

min-width:50px La largeur minimale est de 50px

max-width:50px La largeur maximale est de 50px

Structure de style CSS

p{ min-width :50px>

p{max-width:50px>

1 css min-hauteur

css max-height

3. largeur css

4. hauteur css

Instructions pratiques d'application

Largeur minimale (min-width) et maximale width (max -width) est utilisé pour définir les restrictions de largeur minimale et maximale de l'image. Par exemple, lorsqu'une image est utilisée comme liste principale et que la taille de l'image dans l'objet est variable, afin d'éviter de la rendre trop petite et incohérente, nous pouvons utiliser le style CSS de largeur minimale. Pour un autre exemple, lorsqu'il y a des articles et des images mélangés dans une boîte, parfois la largeur de l'image ne peut pas être déterminée. À ce stade, si la largeur de l'image html img dépasse la largeur de la boîte p, l'image peut éclater. p box et provoquer une confusion dans l'image.

Lecture étendue :

1. CSS pour définir la hauteur et la largeur de l'image

2 CSS résout le problème des images surdimensionnées qui cassent la page Web DIV

.

3. css img

4. html balise img

Cas d'utilisation de la largeur min et de la largeur maximale

Nous avons mis en place 2 p boîtes et définissez respectivement la largeur maximale et minimale du style, et définissez la bordure CSS sur 1 px, la couleur CSS sur une zone de ligne continue rouge et la hauteur CSS sur 100 px. Les noms CSS des première et deuxième zones sont respectivement css-min-width et css-max-width ; la taille d'origine de l'image dans la première zone est de 165 px de large et 60 px de hauteur ; la deuxième case a la largeur. Elle fait 375 px avec une hauteur de 65 px.

Code CSS du cas

.css-min-width,.css-max-width{ height:100px; border:1px solid #F00} 
.css-min-width img{ min-width:200px} 
.css-max-width{margin-top:10px} 
/* css注释：margin-top设置css-max-width对象上间距为10px */ 
.css-max-width img{ max-width:200px; }

Fragment de code source HTML du cas CSS+DIV

<p>原图片大小：<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br /> 
宽为165px 高度60px<br /> 
<br /> 
<img src="http://www.php.cn" /><br /><br />

La largeur est de 375px et la hauteur est de 65px

Le cas est le suivant :

<p class="css-min-width"> 
    <img src="http://www.PHP.com/img201301/PHP-logo-2013.gif" /> 
</p> 
<p class="css-max-width"> 
    <img src="http://www.PHP.com/img201301/topad1.gif" />

C'est tout pour savoir comment définir la largeur minimale et la largeur maximale du CSS aujourd'hui. Les amis qui en ont besoin peuvent enregistrer. it. Veuillez continuer à prêter attention aux autres mises à jour de ce site.

Lecture recommandée :

Quel est le rôle de la marge CSS

Comment créer des coins arrondis en CSS3

Comment définir le style de bordure de tableau en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!