通过图片自动隐藏包装器中的高度和宽度

，可以使用CSS的object-fit属性来实现。object-fit属性定义了当图片的尺寸与其包装器的尺寸不匹配时，如何调整图片的大小和位置。

常见的object-fit属性值有：

• fill：默认值，图片将完全填充包装器，可能会被拉伸或压缩以适应包装器的尺寸，可能会导致图片的宽高比失真。
• contain：图片将按比例缩放以适应包装器的尺寸，保持其宽高比，可能会在包装器内留有空白区域。
• cover：图片将按比例缩放以填充包装器，可能会超出包装器的尺寸，可能会裁剪图片的部分内容。
• none：图片将按原始尺寸显示，可能会超出包装器的尺寸，可能会导致图片的宽高比失真。
• scale-down：图片将按比例缩放以适应包装器的尺寸，保持其宽高比，如果缩放后的尺寸小于原始尺寸，则使用none的效果。

使用示例：

<style>
    .wrapper {
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="wrapper">
    <img src="image.jpg" alt="图片">
</div>

在上述示例中，.wrapper是图片的包装器，设置了固定的宽度和高度，并使用overflow: hidden;来隐藏超出包装器尺寸的部分。.wrapper img选择器用于设置图片的样式，通过object-fit: cover;将图片按比例缩放以填充包装器，并裁剪超出包装器尺寸的部分。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云对象存储（COS）：腾讯云提供的对象存储服务，可用于存储和管理图片等文件。
• 腾讯云图片处理（CI）：腾讯云提供的图片处理服务，可用于对图片进行裁剪、缩放、水印等处理操作。