0
因此，我正在開發一個使用計算機視覺來檢測真正的咖啡壺的AI項目，以及它是如何充滿的。我正在嘗試使用我非常有限的網頁開發經驗來製作一個網頁來補充這一點。我希望它能夠通過填充或排空咖啡壺圖像，以「完美」的方式顯示計算機視覺所看到的內容。事情是，我也想保持正確的縮放和集中在頁面上，而不管它正在被查看的屏幕的大小（認爲是移動的）。我已經定位並縮小了比例，但我無法弄清楚如何保持這兩個特徵，並讓它充滿/排水。我將如何模仿液麪，但保持縮放？在圖像中設置動畫效果
這是我到目前爲止有：
body {
height: 100%;
width: 100%;
background: #E0D9A8;
}
html {
min-height: 100%;
position: relative;
}
#main {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#main .image1 {
width: 31vw;
min-width: 250px;
min-height: auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
#main img {
width: 100%;
height: 100%;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
min-width: 250px;
white-space: nowrap;
}
.circle:before {
border-radius: 50%;
width: 100%;
padding-bottom: 100%;
background: white;
content: '';
display: inline-block;
vertical-align: middle;
padding-bottom: 0vw;
width: 25vw;
height: 25vw;
min-width: 200px;
min-height: 200px;
}<div id="main">
<div class="image1">
<div class="circle"></div>
<img src="http://i.imgur.com/DbBqGTp.png">
</div>
</div>這裏就是一個的jsfiddle：https://jsfiddle.net/fuk291kf/3/