div设置宽高如何让div大小刚好和图片一样大

div大小如何自适应图片和页面布局

当你在div中插入图片时，图片如果偏大的话，可以通过设置图片宽度为父级div的100%，就是width: 100%;，这样图片的宽度就会完全自适应父级div的宽度啦。而且要注意哦，如果同时设置高度为100%，图片就有变形的风险，所以一般只设置宽度或高度的百分比，另一个属性用auto，让它自己调整会比较棒。

再来说说div本身，div是个典型的块级元素，默认宽度会撑满父容器，默认高度由内容撑开。如果想要让div大小固定，那只要给它设置固定的宽度和高度即可，比如width: 200px; height: 100px;，超简单。

除此之外，html页面的固定大小也可以通过设置容器宽高来实现，比如用CSS写个div让它宽800像素，高600像素。这样，超出这尺寸的内容会出现滚动条，界面既美观又规整。需要点儿炫技的话，还能用表格布局设置固定宽高，虽然现在少用，但偶尔能派上用场。

div大小怎么调整才能适合屏幕和内容

想让div占满整个屏幕大小？这其实特别简单，利用CSS的视窗单位，比如width: 100%加上height: 100vh，100vh代表视窗的100%高度，保证你的div刚好撑满页面，完全不留空白。
在实际开发中，给多个div盒子赋予不同大小和颜色，能帮你快速对比和调试布局，方便极了。比如给3个div分别命名为d1、d2、d3，调不同的宽高配色，效果一目了然。
有时候呢，想让div大小刚好配合图片，这就得用点小技巧了。比如通过裁剪图片，匹配div的宽高设置图片宽高为100%和高度100%，保证图片完美填充div盒子。或者把图片当作背景图，设置background-size: cover;，让背景图充满div并保持比例，这个操作很大牌。
还有更酷的办法是用CSS的vh单位自动适应浏览器大小，设置div高度为50vh或者更多，根据视窗高度百分比灵活调整。宽度配合100%一整套下来，用户不管怎么缩放浏览器，div和图片都不会出错，随拉随变，真心好用。