容器约束下图片鼠标悬停切换后尺寸异常的技术求助

问题核心是切换后的新图片默认以自身原始尺寸渲染，没有继承容器的尺寸限制。直接通过CSS给图片添加适配规则就能搞定，以下是两种可行方案：

方案一：CSS强制图片适配容器（推荐） #

给目标图片添加样式，让它始终填满容器并保持比例，不管图片本身尺寸多大：

/* 针对容器内的目标图片设置样式 */
.flex-container #bookCover2 {
  width: 100%;
  height: 100%;
  /* 可选：保持图片比例并填充容器，超出部分裁剪 */
  object-fit: cover;
  /* 或者用 object-fit: contain; 保持比例完整显示，容器留白 */
}

同时确保你的.flex-container容器已经设置了明确的宽高（比如width: 300px; height: 400px;），或者通过flex布局的父容器约束确定尺寸，这样图片的100%宽高才有参考基准。

方案二：JS切换时同步容器尺寸 #

如果不想改CSS，也可以在切换图片时手动把容器的尺寸同步给图片：

const imageContainer = document.querySelector('.flex-container');
const image = document.getElementById('bookCover2');
const originalSrc = 'Book_2_Cover.png';
const newSrc = 'Book_2_Back.png';

// 提前获取容器尺寸，避免每次悬停重复计算
const containerWidth = imageContainer.clientWidth;
const containerHeight = imageContainer.clientHeight;

imageContainer.addEventListener('mouseover', () => {
  image.src = newSrc;
  image.style.width = `${containerWidth}px`;
  image.style.height = `${containerHeight}px`;
});

imageContainer.addEventListener('mouseout', () => {
  image.src = originalSrc;
  image.style.width = `${containerWidth}px`;
  image.style.height = `${containerHeight}px`;
});

这种方法需要容器尺寸固定，如果容器尺寸会动态变化（比如窗口缩放），得额外监听尺寸变化事件，不如CSS方案灵活。

内容的提问来源于stack exchange，提问作者James Sanders