如何在HTML中统一图片尺寸并实现鼠标悬停放大效果？

一、统一图片显示尺寸 #

现有代码仅给图片设置了width:100%，如果原图比例不同，图片高度会参差不齐。要统一尺寸，需给容器固定高度，同时让图片自适应填满容器且不变形：

.samples {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
  /* 补充flex布局，让三列横向排列 */
  display: flex;
  gap: 2%; /* 列之间的间距 */
  flex-wrap: wrap;
}

.samples-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  /* 固定容器高度，统一图片显示尺寸，数值可按需调整 */
  height: 300px;
}

.samples-col img {
  width: 100%;
  height: 100%;
  /* 让图片按比例填满容器，裁剪多余部分，避免变形 */
  object-fit: cover;
}

二、添加鼠标悬停放大效果 #

用CSS变换实现图片放大，配合过渡动画让效果更自然，且不会影响外部布局：

.samples-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 添加平滑过渡动画 */
  transition: transform 0.3s ease;
}

/* 鼠标悬停时放大图片，放大倍数可自行调整 */
.samples-col:hover img {
  transform: scale(1.1);
}

完整修改后的代码 #

CSS部分

.samples {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
  display: flex;
  gap: 2%;
  flex-wrap: wrap;
}

.samples-col {
  flex-basis: 32%;
  border-radius: 10px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  height: 300px;
}

.samples-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.samples-col:hover img {
  transform: scale(1.1);
}

HTML部分（无需修改）

<div class="samples-col">
  <img src="images/sample-1.png">
  <div class="layer">
    <h3>lovely </h3>
  </div>
</div>
<div class="samples-col">
  <img src="images/sample-2.png">
  <div class="layer">
    <h3>pretty </h3>
  </div>
</div>
<div class="samples-col">
  <img src="images/sample-3.png">
  <div class="layer">
    <h3>amazing </h3>
  </div>
</div>

关键说明 #

• 给.samples补充flex布局，才能实现三列横向排列的效果；
• object-fit: cover保证图片按比例填充容器，不会因尺寸适配变形；
• transform: scale()通过CSS变换实现放大，不会改变元素的实际占位，因此不会打乱原有布局；
• transition属性让放大/还原的过程更平滑，避免效果生硬。

内容的提问来源于stack exchange，提问作者User MEOW