让图片适应标签的CSS object-fit属性
object-fit 属性用于指定可替换元素（例如 <img> 或 <video>）的内容应该如何适应容器的尺寸。以下是几种常见的 object-fit 值及其作用：
fill：默认值。拉伸图片以填满容器，可能会改变图片的比例。contain：保持图片的原始比例，缩放图片以适合容器内部，完全包含在容器内。cover：保持图片的原始比例，缩放图片以覆盖容器，可能会超出容器边界。none：不改变图片大小，图片可能会溢出容器。scale-down：效果跟none或contain中较小的那个相同。
如果你想让图片适应标签的大小，你可以在 CSS 中这样写：
.my-image {
width: 100%; /* 让图片宽度适应容器的宽度 */
height: auto; /* 高度自动，确保不会失真 */
object-fit: contain; /* 或者其他你需要的值 */
}然后在 HTML 中使用这个类：
<img src="path/to/image.jpg" alt="描述" class="my-image">这样图片就会根据标签的大小和 object-fit 的值来显示了。
评论已关闭