如何在不缩放父元素的前提下让图片适配div且保持响应式？

1. 锁定父容器尺寸（避免被子元素撑开） #

给所有核心父容器添加overflow: hidden，确保它们的尺寸不受子元素内容影响：

.data, .dataispod, .detaljilevo, .slikacontainer {
    overflow: hidden;
}

2. 让图片自适应容器并保持比例 #

修改图片的CSS规则，使用object-fit属性控制图片的适配方式，同时强制图片填满容器：

.slikawrap img {
    border-radius: 5px;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填满容器，裁剪超出部分，保持宽高比 */
    /* 若需完整显示图片不裁剪，替换为 object-fit: contain; 容器可能出现留白 */
}

3. 保留slikawrap的响应式设置 #

继续保留.slikawrap的百分比尺寸，它会基于直接父容器.slikacontainer的尺寸计算，不会影响上层父元素：

.slikawrap {
    height: 60%;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 5px 5px 20px #555555;
}

核心原理 #

• object-fit 属性让图片在保持自身宽高比的同时，适配容器的尺寸，不会因为图片本身的大小导致容器变形。
• 所有父容器都设置了明确的尺寸或比例，配合overflow: hidden，彻底杜绝子元素撑开父容器的情况。
• .slikawrap的百分比尺寸仅相对于其直接父容器.slikacontainer生效，而上层父元素的尺寸是固定或明确的，因此不会触发父元素缩放。

内容的提问来源于stack exchange，提问作者user21626341