创建含3张等尺寸图片的导航栏遇图片过大问题求助

你的图片之所以显示过大，是因为仅给图片容器.bouton设置了宽高，但未限制内部<img>元素的尺寸，图片会按自身原始大小渲染，超出容器范围。

修复方案 #

直接给<img>元素添加尺寸约束，同时优化导航栏的布局：

修复后代码 #

CSS

#navbar {    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    /* 调整margin让导航栏水平居中，去掉多余的左侧偏移 */
    margin: 0 auto 10% auto;
}

.bouton {  
    width: 30%;
    /* 用aspect-ratio维持容器宽高比，避免高度塌陷 */
    aspect-ratio: 1/1;
}

.bouton img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer; /* 添加上手型光标，提示可点击 */
}

HTML

<div id="navbar">
    <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="tattoo"></div>
    <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="iIllustration"></div>
    <div class="bouton"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg" id="objet"></div>
</div>

补充说明 #

• aspect-ratio:1/1让容器保持正方形，可根据需求调整比例（如3/2）
• 若需要图片点击跳转，给.bouton或<img>包裹<a>标签即可

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