CSS变换比例剪切图像

我在容器中有一个图像，它有溢出滚动，我将实现缩放功能，所以为了放大，我想放大图像。在下面给出的片段中，有两个图像，第一个图像的比例值为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>

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

但是您可以使用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>

不确定你想做什么，但这可能会有所帮助。以下是两个使用缩放和转换的示例。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>

相关内容

最新更新

热门标签：