Tailwind CSS图片w-3/5宽度失效，求排查继承来源及修复方法

我尝试为图片制作横幅样式，编写了如下代码。将图片宽度设置为父容器的约60%（w-3/5），并设置margin-left:auto，但渲染后的图片宽度却占满了父容器的100%，找不到宽度继承的来源，不知道该怎么修复。

代码示例 #

import React from "react";
import Image from "next/image.js";

const EachBannerSlide = ({ bannerUrl, title }) => {
  return (
    <div className="carousel-container relative w-full h-full py-5 px-0 overflow-x-hidden mt-5">
      <div className="carousel flex h-full w-11/12 relative m-auto bg-black">
        <div className="slider bg-black rounded flex-none h-full mr-8 overflow-hidden relative left-0 w-full">
          <img src={bannerUrl} alt={title} className="block ml-auto min-h-full object-cover w-3/5" loading="lazy" />
        </div>
      </div>
   </div>
  );
};

尽管设置了w-3/5，图片还是占满了整个横幅，恳请帮忙解决！

编辑补充：

• 当前效果：图片完全填充黑色背景的横幅容器，右侧无预期留白
• 元素检查结果：图片实际渲染宽度为100%
• 父容器属性：父容器.slider宽度为100%，包含flex-none、overflow-hidden等样式

问题原因及修复方案 #

核心原因

父容器.slider设置了w-full，图片的w-3/5本应基于这个父容器宽度，但结合min-h-full和object-cover的拉伸特性，再加上可能存在的全局默认样式（比如img默认width: auto被继承或强制覆盖），导致图片被拉伸至100%宽度。另外你导入了Next.js的Image组件但实际使用原生<img>，如果是Next.js项目，可能存在全局样式影响。

具体修复方法

1. 利用flex布局对齐
   给父容器.slider添加flex justify-end，让图片靠右对齐并保持设定宽度：

<div className="slider bg-black rounded flex-none h-full mr-8 overflow-hidden relative left-0 w-full flex justify-end">
  <img src={bannerUrl} alt={title} className="min-h-full object-cover w-3/5" loading="lazy" />
</div>

2. 强制限制最大宽度
   给图片添加max-w-[60%]（对应w-3/5的比例），覆盖默认的拉伸行为：

<img src={bannerUrl} alt={title} className="block ml-auto min-h-full object-cover w-3/5 max-w-[60%]" loading="lazy" />

3. 正确使用Next.js Image组件
   如果你本来打算用Next.js的Image组件，改用fill属性配合父容器的相对定位来实现：

<div className="slider bg-black rounded flex-none h-full mr-8 overflow-hidden relative left-0 w-full">
  <Image 
    src={bannerUrl} 
    alt={title} 
    className="ml-auto object-cover w-3/5" 
    fill 
    loading="lazy" 
  />
</div>

4. 排查全局样式
   检查项目中是否有全局CSS给img标签设置了width: 100%，如果有，可以用Tailwind的!w-3/5临时提升优先级排查（不推荐长期滥用）。

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