前端开发 css图片大小的设置

如何不将图片设置为div区域的背景 而就用img 使img充满整个div区域

首先要确定div的宽高比和图片的宽高比一样，才可以在图片不变形的状态下撑满div，否则肯定会撑不满
外层div设置宽高，内层img只需要设置width:100%或者height:100%就行，图片会自适应尺寸

可以使用CSS样式将img元素的宽度和高度设置为100%来实现将img充满整个div区域的效果。具体做法如下：

在HTML中添加一个div元素和一个img元素，并将img元素的src属性指定为要显示的图片路径，如下所示：

<div class="container">
 <img src="image.jpg">
</div>

在CSS中设置.container元素的宽度和高度，并将img元素的宽度和高度都设置为100%。注意，img元素需要设置为块级元素，以使其充满整个div区域，如下所示：

.container {
 width:500px;
 height:300px;
}

.container img {
 display: block;
 width:100%;
 height:100%;
}

这样，img元素就可以充满整个div区域了。如果需要调整图片的大小，只需要调整div元素的宽度和高度即可。

给 图片 设置宽高 等于 父级div . 直接 width: 100%;
height: 100%;

div {
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div {
  display: flex;
}

img {
  flex-grow: 1;
  height: auto;
  width: 100%;
}