Css 对于图片预览，我需要在图片前面垂直放置2个div元素

对于图片预览，我想在图片前面放置两个不可见的div（图片中的红色/蓝色），以实现下一个/上一个图像功能。 我想让div（“pictureContainer”/“绿色边框区域”）自动接管包含图片的维度，但如果不手动设置宽度和高度，我无法找到纯CSS解决方案

.container{
位置：固定；
宽度：100%；
身高：100%；
边框：3倍纯黑；
}
.pictureContainer{
/*我不想手动设置宽度和高度。
容器的大小应与包含的图像相同*/
身高：50%；
宽度：300px；
位置：相对位置；
保证金：自动；
边框：3倍纯绿；
}
.左边{
背景颜色：蓝色；
浮动：左；
身高：100%；
宽度：50%；
不透明度：80%；
}
.右侧{
背景色：红色；
浮动：对；
身高：100%；
宽度：50%；
不透明度：80%；
}
.图片{
位置：绝对位置；
排名：0；
左：0；
保证金：自动；
z指数：-1；
}

---

您应该更改，使div具有

absolut:position

，让图像具有其自然大小，容器应为

显示：内联块


.container{
显示器：flex；
对齐项目：居中；
证明内容：中心；
位置：固定；
宽度：100%；
身高：100%；
边框：3倍纯黑；
}
.pictureContainer{
位置：相对位置；
显示：内联块；
保证金：0自动；
边框：3倍纯绿；
}
.图片{
显示：块；
}
.左边{
位置：绝对位置；
排名：0；
底部：0；
左：0；
背景颜色：蓝色；
宽度：50%；
不透明度：80%；
z指数：1；
}
.右侧{
位置：绝对位置；
排名：0；
底部：0；
右：0；
背景色：红色；
身高：100%；
宽度：50%；
不透明度：80%；
z指数：1；
}

图片不再居中对齐。请尝试使用display flex或text align:center at container类将图片居中image@tot对不起，我错过了。在示例中已修复。我使用flex进行对齐。