Question

我使用以下代码放大图像：

<style type="text/css">
.thumbnail {
    width: 100%;
    height: 450px;
    overflow:hidden;
}
.image {
    width: 100%;
    height: 100%;    
}
.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.image:hover img {
    -webkit-transform:scale(3); /* Safari and Chrome */
    -moz-transform:scale(3); /* Firefox */
    -ms-transform:scale(3); /* IE 9 */
    -o-transform:scale(3); /* Opera */
     transform:scale(3);
}
 </style>


 <div class="thumbnail">
  <div class="image">
   <img src="example.jpg" alt="Image zoom">
  </div>
 </div>

目前此代码的工作原理除外，只会缩放到图像的中心。我的问题是：如何放大预定的位置（可以像左边或右边那样简单，而不是它当前的中心。）我想尽可能使用CSS来实现结果。

Answer 1

使用 Transform Origin 属性，您可以设置原点。这将允许您控制从/到的缩放位置。

transform-origin: top right;等。

如何使用CSS放大图像的特定位置

1 个答案: