Css+background achieve picture width and height adaptive, stretch cropping does not deform

Picture width is not fixed, the same realization of self-adaptation, stretching and cutting not deformation, adapt to the major compatibility.

Let's look at two different photos on the Internet:

No.2

From a wide view of a house, it is difficult to adapt to self-adaptation, but the hateful product manager, can only find their own way

Please take a look at the picture below, it is easy to test on the Big browser and mobile phone.

Let's take a comparison first:

Easy to use and not useful

Here's the code: just put a div on the OK.

<Divstyle= "width:500px;　　height:600px;　　border:1px solid #000000; Background:url (Http://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg) no-repeat; Background-size:cover; Background-position:center Center;"　　　　></Div><Divstyle= "width:500px;　　height:600px;　　border:1px solid #000000;　　Background:url (http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg) no-repeat;　　Background-size:cover; Background-position:center Center; "></Div>

Css+background achieve picture width and height adaptive, stretch cropping does not deform