图片大小自适应、pc端、移动端

图片大小自适应、pc端、移动端

pc端：

/*装图片的盒子*/
.box {
  width: 200px;
  height: 200px;
}
/*盒子里的图片*/
.box img {
  width: 100%;/*相对于父级的宽计算*/
  height: 100%;/*相对于父级的宽计算*/
}

这样的设置只适合用于图片大小与盒子大小差不多的，否则会导致图片失真（变形，放大或缩小）。
不管容器有多大，只要将img的宽高设置成100%，图片就能自适应容器的大小。
如果不想图片被缩小或许放大，可以这样设置：

/*盒子里的图片*/
.box img {
  max-width: 100%;/*相对于自己的宽计算*/
  max-height: 100%;/*相对于自己的宽计算*/
}

注意：max-width是相对于img自身的尺寸而言的，图片最大宽度为自身尺寸的宽，就算盒子再大，图片也不会再增大，更通俗的讲就是只允许缩小不允许放大img，在一定程度上保证了图片不会被放大而失真。
具体使用width、还是max-width要根据具体情况来使用。

移动端

.boc {
    width: 7.5rem;//rem是根据html的font-size进行计算的，
    height: 2.90rem;
    overflow: hidden;//超出盒子的会被隐藏，可不写，看需求
}

.box img {
    display: block; //可以不写，但是写banner图的时候要加
    height: auto;
    width: 100%;//宽度跟随父级变化
}

在移动端不使用px作为单位，因为要进行自适应各个屏幕的大小，可以通过JS进行计算得出html的font-size值，
rem是根据html的font-size进行计算的，当屏幕大小变化，改变了html的font-size值，盒子就回适应变化。