在网页中，图片是非常吸睛的，好的图片不仅能够有助于用户体验，还能提升网站的留存率、成交率，对网站的流量和排名都有巨大的效益。一个网站上可能有相当数量的图片，指望手工一个个调整显然是不太可能做到的事情，而通过CSS调整图片的大小，以及去自适应网站的DIV框架显得尤为重要。今天，我们来分享几个让图片自适应DIV大小的css代码，希望都各位有所帮助。
css调整图片大小
div {
width: 640px;
height: 420px;
overflow: hidden;
}
div img {
width: 100%;
height: auto;
}这种css代码虽然自适应了DIV的大小，如果图片高度和宽度比例合适，填充满这个div是完全没有问题的。不过，如果图片宽度和高度的比例不太恰当，那么还是会出现空白的。怎么避免图片不能填充满这个div框架呢？
div {
width: 300px; /* 设置div的宽度 */
height: 200px; /* 设置div的高度 */
overflow: hidden; /* 隐藏超出div的图片部分 */
display: flex; /* 使用Flexbox布局来居中图片 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
div img {
width: 100%; /* 图片宽度填充div */
height: 100%; /* 图片高度填充div */
object-fit: cover; /* 图片内容覆盖整个div，保持纵横比，允许裁剪 */
} 本文网址：http://www.xalmi.com/article/52.html转载请注明出处！文章内容为作者原创或者采编，不代表本站立场，如有侵犯，请联系a5b5_su@163.com。