try 将图像放入可根据屏幕大小改变尺寸的Div框中.这对我来说还是个新手.
我需要这个图像总是保持它的比例，并被裁剪的分区框，可能是垂直或水平.最好是我想要的图像居中的分割框和5px的出血.
或者，是否也可以在图像上设置一个焦点，这样当分割框改变大小时，该焦点就是居中位置？
非常感谢！
这是我目前的代码，在哪里可以改进，这样图像就会被Div裁剪？
body {
background: white;
display: flex;
height: 100vh;
}
div {
width: calc(100% - 50px);
height: calc(100% - 50px);
background: #f0e8e6;
overflow: hidden;
margin: auto;
display: flex;
}
#container {
max-width: auto;
overflow: hidden;
}
img {
width: calc(100% - 5px);
/* wrong calc? */
object-fit: contain;
}<body>
<div>
<img src="https://euclois.xyz/desert-statue.jpg">
</div>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
overflow: hidden
}
</style>
</body>