您應該確保您的 div 只是假定內容的大小，img在這種情況下。所以不要使用絕對值。您提到使用grid，因此下面的示例將生成一個網格，其主要部分由20px填充包裹。然后只需使用maximg 上的值來確保它確實超出了網格框的大小。然后在網格框內居中：
const width = document.querySelector( '[name=width]' );
const height = document.querySelector( '[name=height]' );
const image = document.querySelector( 'img' );
function onchange(){
image.src = `http://placehold.it/${width.value}x${height.value}`;
image.style = '';
}
width.addEventListener( 'change', onchange );
height.addEventListener( 'change', onchange );
window.addEventListener( 'DOMContentLoaded', () => setTimeout( onchange, 100 ) );
body, html { height: 100%; }
body { padding: 0; margin: 0; }
main {
display: grid;
grid-template: "left top right" 20px "left main right" 1fr "left bottom right" 20px / 20px 1fr 20px;
height: 100%;
}
main div {
grid-area: main;
border: 1px solid red;
display: inline;
align-self: center;
justify-self: center;
}
main div img {
max-width: 100%;
max-height: 100%;
display: block;
}
#inputs {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
transition: transform .4s;
width: 100%;
padding: 10px;
background: black;
color: white;
}
body:hover #inputs {
transform: translateY(0);
}
<main>
<div>
<img />
</div>
</main>
<div id="inputs">
<label>Width: <input name="width" value="200" type="number" /></label>
<label>Height: <input name="height" value="200" type="number" /></label>
</div>
我已經包含了一些 javascript 以便您可以測試不同大小的圖像。我添加了img.style = ''一個在添加新圖像后觸發 CSS 重新計算，否則加載時其大小將不正確。
