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

本文主要是介绍图片大小自适应、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%;//宽度跟随父级变化
}