CSS變換比額表，切斷圖像

我試圖擴展圖像雙重當點擊放大按鈕，
半圖像時點擊縮小按鈕CSS變換比額表，切斷圖像

我的問題是，當點擊放大-in按鈕（因此，圖像大小是雙倍的）
並且如果它的大小超過容器，圖像的左側（或圖像的頂側）被切斷。

我該怎麼辦？

同樣的問題在這裏，CSS Transform scale scrolling issue ...但它不是一個好主意。
因爲它規模也注重「左上方」當縮小形象，讓居中對齊是不可能的
（我想申請改變：使用變換原點規模（..）：中心）

我知道的唯一方法就是每次都計算圖像大小，並將保證金用於截止，但難以應用

有什麼想法嗎？：o

代碼看起來像這樣。

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; 
    } 
}

來源

2017-06-23 highalps

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在[**堆棧片段**]（https：//開頭博客.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

不明白是什麼問題。
轉換時圖像不切斷。

$("#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>

來源

2017-06-23 14:08:01 3rdthemagical

CSS變換比額表，切斷圖像

回答

相關問題