web前端怎么让div大小刚好和图片一样大

在前端开发过程中，我们经常会遇到盒子大小跟图片尺寸不匹配的情况，我们通常会通过以下几种方式来解决。

1.通过采用裁剪图片，根据div盒子设置的宽、高，来更改裁剪图片的尺寸，使图片适配div盒子。

2.设置div的具体宽高，图片宽高分别设置为100%，代码具体如下width:100%height:100%。这种方式，也可以将图片大小填充满盒子。

3.如果图片是网页背景图片，还可以通过设置div盒子内属性background-size为cover，这种方式也可使图片充满盒子。

我们在实际运用中，可以根据不同情况来选择不同图片调整方式。

div边框可以只设置下边框的属性。

拓展：

1、DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

2、<div>标签定义 HTML 文档中的分隔(DIVision)或部分(section)。div属于web前端的学习内容，其中<div>标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化。<div>可定义文档中的分区或节(division/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

简单说

<div></div>就像一个房子

<div></div>基本上是一个固体的长方形

要使用 CSS 一些属性的话

<div>就要加上 class，

<div class="testing123">

这样就可以设定这个名叫 testing123 的房子了

.testing123 {

width: 300px<- 房子的阔是 300px

height: auto<- 房子自适应内容高度

background-color: #000<- 房子的背景是黑色 #000

}

如此类推

<div class="testing123">

<div class="testing456">

</div>

</div>

这样理解就是 testing123 的房子里面有个 testing456 的小房间

---