代码之家 › 专栏 › 技术社区 › Abdullah Danyal

css变换比例截断图像

css

Abdullah Danyal · 技术社区 · 6 年前

我在容器中有一个图像,它有溢出滚动条,我要实现缩放功能,所以为了放大,我想放大图像。在下面给出的代码片段中,有两个图像,第一个具有scale值1,您可以通过垂直和水平滚动查看整个图像。但当它的比例值为2时,我无法通过沿x或y方向滚动来查看整个图像。似乎放大图像会使图像被切掉。解决这个问题的办法是什么?

div {
  height: 200px;
  width: 500px;
  overflow: scroll;
}

img {
  transform: scale(1)
}

.div2 {
margin-top: 5px;
}

.div2 img {
 transform: scale(2)
}

<div>
  <img src="https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg" />
</div>

<div class="div2">
  <img src="https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg" />
</div>

2 回复 | 直到 6 年前

Victor.Chou 6 年前

Transform: scale(2) 无法定义IMG的宽度/高度值 .div2

但你可以用 jquery 规模。

例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
    div {
      height: 200px;
      width: 500px;
      overflow: scroll;
    }

    img {
      transform: scale(1)
    }

    .div2 {
      margin-top: 5px;
    }
    </style>
</head>

<body>
	
    <div>
        <img src="https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg" />
    </div>

    <div class="div2">
        <img src="https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg" />
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
		  var originImgWidth = $('.div2 > img').width();
		  var originImgHeight = $('.div2 > img').height();
		  var ratio = 2;

		  //Check img orgin size
		  //console.log('originSize:', originImgWidth, originImgHeight);

		  $('.div2 > img').css({
		      'width': originImgWidth * ratio + 'px',
		      'height': originImgHeight * ratio + 'px'
		  })
    </script>
</body>

</html>

fencepencil 6 年前

不知道你想做什么,但也许这会有帮助。这里有两个例子,使用scale和transition。这个 transform-origin 将更改图片的缩放方式。

div {
  height: 200px;
  width: 500px;
  overflow: scroll;
}

img {
  width: 100%;
  height: 100%;
  background-image: url(https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg);
  background-size: cover;
  transform-origin: right;
  transform: scale(1);
  transition: transform 1s ease;
}

img:hover {
  transform: scale(2);
}
    
.div2 img {
  background-image: url(https://www.tennisworldusa.org/imgb/57551/roger-federer-to-take-a-threemonth-break-i-won-t-play-roland-garros-.jpg);
  background-size: cover;
  transform-origin: center;
  transform: scale(1);
  transition: transform 1s ease;
}

.div2 img:hover {
  transform: scale(2);
}

<div>
  <img>
</div>
<div class="div2">
  <img>
</div>