我尝试缩放图像双击时单击放大按钮,和半图像时单击缩小按钮
我的问题是,当点击放大按钮时(因此,图像尺寸为双倍)
如果它的大小超过容器,则图像的左侧(或图像的顶部)会被切断。
我该怎么办?
同样的问题,CSS Transform scale scrolling issue ......但这不是一个好主意。
因为它也把重点放在左上方'缩小时
图像,所以中心对齐是不可能的
(我想使用transform-origin:center)应用transform:scale(..)
我知道的唯一方法是每次计算图像尺寸,并应用保证金来截止,但很难应用
请问有什么想法吗? :○代码看起来像这样。
constructor() {
super()
this._refs = { ratio: 100 }
}
getImageStyle() {
return {
transform: scale(calc(${this.state.ratio} / 100)),
'transform-origin': 'center'
}
}
zoomIn() {
this.setState({ ratio: this.state.ratio + 25 })
}
zoomIn() {
this.setState({ ratio: this.state.ratio - 25 })
}
render() {
const { src } = this.props
return (
<div
className={styles.wrapper}
<img
style={this.getImageStyle()}
ref={(elem) => setRefToNode(this._refs, 'image', elem)}
className={styles.image}
src={src} />
</div>
)
}
和css。
.wrapper {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
overflow: scroll;
.image {
position: relative;
max-width: 100%;
max-height: 100%;
background-color: white;
}
}
答案 0 :(得分:0)
不明白问题所在。
转换时图像不会中断。
$("#zoom-in").on("click", function() {
$(".image").removeClass("zoom-out");
$(".image").addClass("zoom-in");
});
$("#zoom-out").on("click", function() {
$(".image").removeClass("zoom-in");
$(".image").addClass("zoom-out");
});
$("#zoom-off").on("click", function() {
$(".image").removeClass("zoom-in");
$(".image").removeClass("zoom-out");
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border: 4px solid;
}
.wrapper .image {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.4);
border-radius: 50%;
transform-origin: center;
transition: transform ease .3s;
}
.wrapper .image.zoom-in {
transform: scale(2);
}
.wrapper .image.zoom-out {
transform: scale(0.5);
}
section {
position: fixed;
bottom: 0;
left: 0;
margin: 10px;
}
section button {
width: 30px;
height: 30px;
margin: 10px;
font-weight: bold;
font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image"></div>
</div>
<section>
<button id="zoom-out">−</button>
<button id="zoom-off">0</button>
<button id="zoom-in">+</button>
</section>