如何在框架内缩小图像

Question

在我的网页中，我很累以制作网格类型的图像库。我想要在框架内放大图像。（示例：http：//cad180.com/大约）[悬停图像在框架内放大]。

.gal {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  display: block;
  overflow: hidden;
}
.zoom {
  cursor: pointer;
  transition: all .5s ease;
}
.zoom:hover {
  transform: scale(1.2, 1.2);
}
.gal img {
  width: 100%;
  padding: 7px 0;
}
@media (max-width: 500px) {
  .gal {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}

<div class="container">
  <div class="col-md-12">
    <div class="row">
      <div class="gal">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
      </div>
    </div>
  </div>
</div>

请帮助我执行此操作。

简单地您需要用div包装img元素，然后在其上进行overflow: hidden：

.grid {
    overflow: hidden;
}

jsfiddle

对于第二个问题，您需要使用backface-visibility: hidden;来修复它。在此处阅读有关它的更多信息。

将图像包装在容器中，然后将overflow: hidden;添加到容器中。

还从img元素中卸下填充物，并在容器上设置间距。

.gal {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  display: block;
}
.image-container {
  overflow: hidden;
  margin: 14px 0;
}
.zoom {
  cursor: pointer;
  transition: all .5s ease;
}
.zoom:hover {
  transform: scale(1.2);
}
.gal img {
  width: 100%;
}
@media (max-width: 500px) {
  .gal {
    -webkit-column-count: 1;
    /* Chrome, Safari, Opera */
    -moz-column-count: 1;
    /* Firefox */
    column-count: 1;
  }
}

<div class="container">
  <div class="col-md-12">
    <div class="row">
      <ul class="gal">
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
        </li>
        <li class="image-container">
          <img class="zoom" src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
        </li>
      </ul>
    </div>
  </div>
</div>