Question

在我的网页中，我已经厌倦了制作一个网格类型的图片库。我希望悬停图像应该在框架内缩放。（示例：http://cad180.com/About）[悬停图像在框架内缩放]

.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>

请帮我这样做，中间部分和右侧部分图像也没有正确缩放。请帮助我。MY DEMO CODE

Answer 1

您只需要将img元素与div包裹起来并对其进行overflow: hidden：

.grid {
    overflow: hidden;
}

<强> JSFiddle

对于您的第二个问题，您需要使用backface-visibility: hidden;来修复它。详细了解 here 。

Answer 2

将图像包装在容器中，并将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>

如何在帧内缩放图像

2 个答案: