CSS min-width property

 The function of the CSS min-width property is to control the minimum width of web page elements, such as images , videos , DIV blocks , textarea text input fields... etc. For example, in a web page, the width of a picture It may be set by percentage. It is possible to change the size of the image with the size of the parent element or the entire web page, but it cannot be reduced endlessly, so web designers can use the CSS min-width property to limit the size of the image. It cannot be lower than the width to maintain the practicality of image browsing. All mainstream browsers support the effect of the CSS min-width property. IE6 and older versions do not support the CSS min-width property.

CSS min-width property syntax

min-width: width setting value;

CSS min-width can set the width setting value by yourself , accept numbers plus width units (such as px, em, cm... etc.), and also accept the setting method of percentage (%). In addition, inherited from the parent layer is not All browsers support and are not recommended. The three min-width attribute setting methods are as follows.

Width value	grammar	Description
none	min-width:none;	The default value does not set the minimum width limit.
width	min-width: number + unit;	Acceptable units are px, em, cm and other web standard units.
%	min-width: number%;	Use percentage to set the minimum width of web page elements.
inherit	min-width:inherit;	The minimum width attribute value inherited from the parent layer.

CSS min-width property example

<div style="width:200px;border:1px #ccc solid;padding:5px;">
    <img src="Image URL" style="width:100%;">
</div>
<div style="width :200px;border:1px #ccc solid;padding:5px;">
    <img src="Image URL" style=" min-width:300px; ">
</div>

Example output

In order to clearly see the effect of the CSS min-width property, we have prepared two pictures in the example, the width of the first picture is set to 100%, and the size of the picture itself changes with the size of the parent DIV block , The second image uses today’s theme "min-width" attribute, and the minimum width is set to 300px, so that the image will not change with the size of the DIV, although the size of the DIV block is limited to 200px, the image still has a size of 300px, which is the most basic function of the min-width attribute.

Corresponding to the min-width property is: CSS max-width property .