Question

我想在不调整图像大小的情况下放大图像。有人知道这是否可行？我已经尝试过'溢出：隐藏'但不幸的是它没有用。

e.g。我有一个300px x 300px的图像我希望图像保持相同的尺寸（300x300），但放大内容。

这是我的代码 - 感谢任何建议！

HTML

<div class="wrapper">
        <div id="p1"> </div>
</div>

CSS

div.wrapper{
    overflow: hidden;
}

div.wrapper > div{
    width: 100%;
    height: 100%;

    -webkit-transition: all 4s ease;
       -moz-transition: all 4s ease;
         -o-transition: all 4s ease;
        -ms-transition: all 4s ease;
            transition: all 4s ease;    

    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
        -ms-background-size: cover;
            background-size: cover; 
}

div.wrapper:hover > div{
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);          
}

#p1{
    background-image: url(../images/pic1.jpg);
    width: 350px;
    height: 520px;
    margin-left: 400px;
    margin-top: 70px;
}

Answer 1

当您使用背景图片而不是实际的内联图片元素时，您需要转换background-size而不是transform:scale。

＆＃13;

div.wrapper {
  overflow: hidden;
}
div.wrapper > div {
  width: 100%;
  height: 100%;
  transition: background-size 4s ease;
  background-size: 100%;
  background-position: center center;
}
div.wrapper:hover > div {
  background-size: 120%;
}
#p1 {
  background-image: url(https://picsum.photos/200);
  width: 200px;
  height: 200px;
}

＆＃13;

<div class="wrapper">
  <div id="p1"></div>
</div>

＆＃13;

使用css放大图像而不调整大小

1 个答案: