如何在没有固定大小的情况下将图像放大效果添加到块中

How to add image zoom-in effect to block without fixed size?

本文关键字：放大 图像 添加 情况下      更新时间：2023-09-26

我有流体网格：width:33.3%一行3个区块。包含在该块中的图像具有width: 100%和height: auto。我想为这些图像添加悬停时的放大效果。但我不知道如何在不改变区块高度的情况下使用流体网格。你可以在下面看到我的代码片段。

有什么解决办法吗？

.split.third {
  width: 33.3%;
  display: block;
  float: left;
  overflow: hidden;
}
.split.third img {
  width: 100%;
  height: auto;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.split.third:hover img {
  width: 120%;
}
<div class="split-wrap">
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png" />
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png" />
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png" />
    </div>
  </div>
</div>

使用transform: scale(1.2)。

.split.third {
    width: 33.3%;
    display: block;
    float: left;
    overflow: hidden;
}
.split.third img {
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform 1s ease;
            transition: -webkit-transform 1s ease;
            transition: transform 1s ease;
            transition: transform 1s ease, -webkit-transform 1s ease;
}
.split.third:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
<div class="split-wrap">
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
  <div class="split third">
    <div class="cover">
      <img src="http://cs5-3.4pda.to/5290239.png">
    </div>
  </div>
</div>

相关文章：