The maximum width attribute helps developers limit the width of text or other elements. The maximum width is to limit your elements to the boundary. Use the following code to limit the maximum width. You can also change the value based on your needs.
. Container {
Width: 800px;
Max-width: 90%;
}
-Adaptive image size
The following code automatically adjusts the image size according to the specified width. What you need to do is set the maximum width to 100% height self-adaptive.
Img {
Max-width: 100%;
Height: auto;
}
However, some adjustments need to be made to the Code above IE8, because the code above is only effective for IE7 and IE9. For IE8:
@ Media \ 0 screen {
Img {
Width: auto;/* for ie 8 */
}
}
-Minimum Width
Always remember the difference between the maximum width and the minimum width. The maximum width limits all elements in the box, and the minimum width is set to the minimum width for text or other elements. However, when this style is applied, Your webpage will not be scaled down proportionally after the minimum width is reached.