Fatal编程技术网
  • html/
  • Html CSS在使用变换比例时防止溢出

Html CSS在使用变换比例时防止溢出

html css

Html CSS在使用变换比例时防止溢出,html,css,Html,Css,使用transform:scale（）时出现问题 基本上，我在有overflow:hidden 查看这把小提琴的现场表演： HTML <div id="container1"> <img src="http://lorempixel.com/400/200"> </div> <p> i want this image to scale just like #example no. 2. how to achive this one? </

使用
transform:scale（）时出现问题

基本上，我在有
overflow:hidden

查看这把小提琴的现场表演：

HTML


<div id="container1">
  <img src="http://lorempixel.com/400/200">
</div>
<p> i want this image to scale just like #example no. 2. how to achive this one? </p>
<br><br>
<div id="container2">
  <img src="http://lorempixel.com/400/200">
</div>


如何在缩放图像时防止溢出

我的代码怎么了


提前感谢…
您需要为
img


img {width:200px; 
height:200px; 
transition:transform 1s linear;
position: absolute; 
}



确保您的容器具有所需的宽度和高度

html


演示：
谢谢jiiff的回答，好吧，我想要像2号一样缩放1号图像，而不是其他方式我想我得到了，给你的
img
绝对
，这是你想要的吗@清清哇，太酷了！但是，如果我有多个图像呢？就像这张照片一样，图像被隐藏了

img {width:200px; 
height:200px; 
transition:transform 1s linear;
position: absolute; 
}



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <div class="wrap">
    <div class="bg agent-1"></div>
  </div>
</body>
</html>



    @keyframes fade-in {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(2);
      }
    }
    .agent-1 {
      animation: fade-in cubic-bezier(0.0, 0.0, 0.2, 1) 10s forwards;
    }

    .bg {
      width: 100%;
      height: 100%;
      background-image: url(https://images.unsplash.com/photo-1498811107811-a20a5be82dc1?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=01f6b00c3415f756949a44aadb54567e);
      background-size: cover;
      background-position: center;
    }

    .wrap {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }