Javascript 如果分辨率大于内容区域，如何将div紧紧包裹在图像周围，同时调整图像大小以适应内容区域？

我正在尝试构建一个具有特定需求的图像查看器。详情如下:

• 内容区域是一个网格区域
• 如果图像大于内容区域，则应在不拉伸图像的情况下包含图像
• 如果图像小于内容区域，则图像应位于内容区域的中心
• 必须始终有一个div紧紧地包裹图像

我在下面做了一个速写，说明了肖像画（顶行）和风景画（底行）所需的行为。如果图像的分辨率高于内容区域，则左列上的图像是所需的行为

颜色代码：

• 白框：内容区
• 红色框：图像
• 蓝色边框：图像 包装部

到目前为止，我的主要方法是在图像周围绝对定位环绕div，这在我尝试调整大小以适应行为之前效果良好。通常这会打破紧密包裹的div

---

我也可以使用JavaScript，但是因为这是一个基础之上，我宁愿把它放在HTML和CSS上。

你应该确保你的div在这个例子中只假设内容的大小，<代码> img < /代码>。所以不要使用绝对值。您提到了使用

grid

，因此下面的示例将生成一个网格，其主要部分由

20px

填充包裹。然后只需使用img上的

max

值，以确保其超出网格框的大小。然后将其置于网格框的中心：

const width=document.querySelector（“[name=width]”）；
const height=document.querySelector（“[name=height]”）；
const image=document.querySelector（'img'）；
函数onchange（）{
image.src=`http://placehold.it/${width.value}x${height.value}`；
image.style=''；
}
宽度。addEventListener（'change'，onchange）；
高度。addEventListener（'change'，onchange）；
addEventListener（'DOMContentLoaded'，（）=>setTimeout（onchange，100））
body，html{height:100%；}
正文{填充：0；边距：0；}
主要{
显示：网格；
网格模板：“左上右”20px“左主右”1fr“左下右”20px/20px 1fr 20px；
身高：100%；
}
主要部门{
网格区域：主；
边框：1px纯红；
显示：内联；
自对准：居中；
自我辩护：中心；
}
主分区img{
最大宽度：100%；
最大高度：100%；
显示：块；
}
#投入{
位置：绝对位置；
排名：0；
左：0；
转换：translateY（-100%）；
转变：转变；
宽度：100%；
填充：10px；
背景：黑色；
颜色：白色；
}
主体：悬停#输入{
变换：translateY（0）；
}

宽度：
高度：
您应该确保您的div只假设内容的大小，在这种情况下是
img
。所以不要使用绝对值。您提到了使用
grid
，因此下面的示例将生成一个网格，其主要部分由
20px
填充包裹。然后只需使用img上的
max
值，以确保其超出网格框的大小。然后将其置于网格框的中心：


const width=document.querySelector（“[name=width]”）；
const height=document.querySelector（“[name=height]”）；
const image=document.querySelector（'img'）；
函数onchange（）{
image.src=`http://placehold.it/${width.value}x${height.value}`；
image.style=''；
}
宽度。addEventListener（'change'，onchange）；
高度。addEventListener（'change'，onchange）；
addEventListener（'DOMContentLoaded'，（）=>setTimeout（onchange，100））
body，html{height:100%；}
正文{填充：0；边距：0；}
主要{
显示：网格；
网格模板：“左上右”20px“左主右”1fr“左下右”20px/20px 1fr 20px；
身高：100%；
}
主要部门{
网格区域：主；
边框：1px纯红；
显示：内联；
自对准：居中；
自我辩护：中心；
}
主分区img{
最大宽度：100%；
最大高度：100%；
显示：块；
}
#投入{
位置：绝对位置；
排名：0；
左：0；
转换：translateY（-100%）；
转变：转变；
宽度：100%；
填充：10px；
背景：黑色；
颜色：白色；
}
主体：悬停#输入{
变换：translateY（0）；
}

宽度：
高度：