本文主要是介绍图片大小自适应、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值，盒子就回适应变化。
这篇关于图片大小自适应、pc端、移动端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
