网页插入图片的两种常见应用场景
在网页编写，我们经常会插入图片来优化网页整体结构，增强用户体验感，在插入图片时，我们会有两种比较常见的应用场景，一种就是使用background-image属性插入背景图片，还有一种是使用img标签插入图片。
使用background-image属性插入背景图片
当插入的 background-image 与容器尺寸不符时，可以通过 CSS 的 background-size 属性来调整背景图像的大小以适应容器。以下是一些常见的解决方案：
1. 使用 background-size: cover;：
较为推荐，不影响图片比例，可能失去部分图片内容
扩展或缩放背景图像以完全覆盖容器，同时保持图像的纵横比。这可能会导致图像的某些部分在容器内不可见。
.container {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: cover;
background-position: center; /* 可选，使图像居中 */
}
2. 使用 background-size: contain：
较为推荐，不影响图片比例，可能会让容器留下部分空白
这将缩放背景图像以完全适应容器，保持图像的完整可见性，但可能会在容器的某些部分留下空白。
.container {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: contain;
background-repeat: no-repeat; /* 可选，防止图像重复 */
background-position: center; /* 可选，使图像居中 */
}
3. 使用指定尺寸`：
精准把控，可能会影响图片比例，比较麻烦
可以使用像素值或百分比来明确设置背景图像的大小。
.container {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: 500px 300px; /* 设置具体的宽和高 */
}
4. 使用百分比适应
较为摆烂的一种方法，会改变图片比例，但是确实一劳永逸
.container {
width: 500px;
height: 300px;
background-image: url('image.jpg');
background-size: 100% 100%; /* 宽度和高度都设置为容器的100% */
}
注意，如果图像的原始纵横比与容器的纵横比不同，使用 background-size: 100% 100%; 可能会导致图像变形。为了避免这种情况，通常建议使用 cover 或 contain 值，或者通过调整容器的尺寸来保持图像的原始纵横比。
如果想要更精细地控制背景图像在容器中的位置和显示方式，可以结合使用 background-position、background-repeat 等属性。
如果容器内的内容（如文本或其他元素）需要与背景图像保持一定的位置关系，可能还需要使用额外的 CSS 布局技巧，如定位（positioning）或弹性盒模型（flexbox）等。
使用img标签插入图片
当img标签里的图片尺寸超过其外部容器尺寸时，有几种方法可以处理这个问题：
1.使用CSS的max-width和height属性：
比较推荐，可以保证图片比例，可以根据图片时横图还是竖图来确定让width还是height取auto
你可以设置图片的max-width为100%，这样图片的最大宽度就不会超过其容器的宽度。同时，为了保持图片的宽高比，可以省略height属性或者将其设置为auto。
.myImg {
max-width: 100%;
height: auto;
}
这样，图片会根据其容器的宽度自动缩放，同时保持其原始的宽高比。
2. 使用object-fit属性：
比较推荐，保留图片比例，但要注意选择cover还是contain
如果你需要更精确地控制图片的显示方式，可以使用object-fit属性。例如，你可以设置object-fit: cover;来确保图片始终覆盖其容器的整个区域，同时保持宽高比，这可能会导致图片的某些部分被裁剪。
.myImg {
width: 100%;
height: 100%;
object-fit: cover;
}
或者，使用object-fit: contain;来确保图片的完整显示，但可能会在容器内留有空白。
3. 使用javaScript来调整图片尺寸：
用于某些特定场景
虽然大多数情况下CSS足以处理图片尺寸问题，但在某些复杂的场景中，你可能需要使用JavaScript来动态调整图片的大小。这通常涉及到读取图片的原始尺寸，然后计算其应该缩放到的尺寸以适应容器。
4. 调整HTML和CSS结构：
从根源解决问题，但这个比较麻烦
确保img标签被放置在一个适当尺寸的容器中，并且该容器具有正确的CSS样式来控制其大小。如果容器本身的大小不正确，那么即使你调整了图片的大小，它也可能看起来不合适。
5. 使用响应式设计：
比较复杂，但适配度比前面的都高
对于需要在不同屏幕尺寸和设备上正确显示的图片，使用响应式设计技术是非常重要的。这通常涉及到使用媒体查询（media queries）来根据视口（viewport）的大小调整图片和容器的尺寸。
