（有關此描述，請參閱下面的 HTML 和 CSS 部分）
我有一個包含影像一部分的容器（inner-container-1）我想讓這個容器更小，縮小內部的影像，但在不改變背景位置坐標的情況下獲得影像的相同部分（這意味著我不能簡單地將背景大小定義為更小，因為在這種情況下坐標會發生變化）。我無法更改，background-position因為在不同的場景中使用了不同的坐標并且這些都是定義的，如果我縮小背景影像，我會background-position為其他場景定義已經定義的問題，因此必須在不更改背景位置的情況下完成或使用的影像。
更具體地說，在這個https://jsfiddle.net/GreenCarrot/tudzq8mx/42/中會看到 inner-container-1 包含貓眼的影像，我想在顯示時將此容器縮小到 (50px x 50px)影像的完全相同的部分按比例縮小并且不改變（背景位置：585px 400px;）。
#outer-container {
width: 300px;
height: 300px;
position: static;
display: flex;
}
#inner-container-1 {
height: 100px;
width: 100px;
position: relative;
border: 1px solid black;
background-image: url(https://images.unsplash.com/photo-1583795128727-6ec3642408f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Y2F0c3xlbnwwfHwwfHw=&w=1000&q=80);
background-position: center;
background-position: 585px 400px;
}
#inner-container-2 {
background-color: yellow;
height: 50px;
width: 50px;
border: 1px solid black;
}<span id="outer-container">
<span id="inner-container-1"></span>
<span id="inner-container-2"></span>
</span>uj5u.com熱心網友回復：
您可以使用變換來縮放它，在這種情況下這很容易計算，因為您想從 100px 變為 50px，所以我們只需將其縮放一半。
#outer-container {
width: 300px;
height: 300px;
position: static;
display: flex;
}
#inner-container-1 {
height: 100px;
width: 100px;
position: relative;
border: 1px solid black;
background-image: url(https://images.unsplash.com/photo-1583795128727-6ec3642408f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Y2F0c3xlbnwwfHwwfHw=&w=1000&q=80);
background-position: center;
background-position: 585px 400px;
transform: scale(0.5);
}
#inner-container-2 {
background-color: yellow;
height: 50px;
width: 50px;
border: 1px solid black;
}<span id="outer-container">
<span id="inner-container-1"></span>
<span id="inner-container-2"></span>
</span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/488397.html