Responsive web Design--three ways to image size adaptive

Organized in the "Responsive web design HTML5 and CSS3 Practice Guide" book

① based on width percentage

<div class= ' Img-wap ' >
 
</div>

For the above picture, we can fix the div width it belongs to with a percentage, then let the picture adapt to the width and height of the div

. img-wap{
 Float:left;
 width:40%;
  }
 . img{
   max-width:100%;
   Height:auto;
   }

② Create a cookie for the device, and return a picture of the appropriate size based on the cookie server
Another way to reduce network bandwidth and increase page load speed is to create a cookie based on the user's device screen size, and when the user requests a picture, the server side determines what size of image to return based on the client's request.
Ways to set up cookies with javascript:

Document.cookie= "screen.dimensions=" + screen.width + "x" + screen.height;

③ based on media query
Creates a media query that detects the size of the browser window. Choose a CSS style based on whether the width is greater than 1024px:

@media screen and (max-width:1024px) {...}
@media screen and (min-width:1025px) {...}

A complete example is given below:

@media screen and (max-width:1024px) {
  img.img2{width:200px;}
}
@media screen and (min-width:1025px) {
  img.img2{width:300px;}
}

Img.img2{height:auto;}