HTML+CSS如何防止图片变形，让图片内缩
1.推荐方法：使用 object-fit: contain
这是实现“图片内缩”效果最直接、最现代的方法。object-fit: contain 会确保图片完整地显示在容器内，并按比例缩放，容器的空白区域会留白。
适用场景：商品展示、头像预览、需要查看图片全貌的任何场景。
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 300px; /* 固定容器宽度 */
height: 200px; /* 固定容器高度 */
border: 1px solid #ccc;
overflow: hidden; /* 确保内容不溢出 */
}
.image-container img {
width: 100%; /* 图片宽度填满容器 */
height: 100%; /* 图片高度填满容器 */
object-fit: contain; /* 关键属性：图片完整显示，保持比例 */
object-position: center; /* 让图片在容器中居中 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="示例图片">
</div>
</body>
</html>
2.传统方法：max-width 和 height: auto
这是一种非常经典且兼容性极佳的方法。它不要求容器有固定高度，图片会根据自身的宽高比和容器的宽度限制进行自适应缩放。
适用场景：文章内的图片、响应式布局中的图片，容器的尺寸不固定。
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 300px; /* 限制容器最大宽度 */
border: 1px solid #ccc;
}
.image-container img {
max-width: 100%; /* 图片最大宽度不超过容器 */
height: auto; /* 高度自动调整，保持比例 */
display: block; /* 消除图片底部的微小间隙 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="示例图片">
</div>
</body>
</html>
3.替代方法：使用背景图 background-size: contain
将图片设置为容器的背景，并使用 background-size: contain 也可以达到类似效果。
适用场景：装饰性图片、对 SEO 要求不高的场景。
缺点：<img> 标签的 alt 属性对搜索引擎更友好，而背景图则不利于图片的 SEO。
<!DOCTYPE html> <html> <head> <style> .image-container { width: 300px; height: 200px; border: 1px solid #ccc; /* 设置背景图并使其完整显示 */ background-image: url('your-image.jpg'); background-size: contain; /* 关键属性 */ background-repeat: no-repeat; /* 不平铺 */ background-position: center; /* 居中显示 */ } </style> </head> <body> <!-- 图片作为背景，容器内可以为空或包含其他文字 --> <div class="image-container"></div> </body> </html>
重要提示：contain vs cover
contain (内缩/完整显示)：图片会完整显示在容器内，可能会在容器四周留下空白。这正是你想要的“内缩”效果。
cover (覆盖/裁剪填充)：图片会按比例放大，直到完全覆盖整个容器，超出容器的部分会被裁剪掉。这常用于实现背景图或卡片图的满铺效果。