为什么我使用“width: 8%;”后图像的宽度没有改变在 CSS 中？答案

【问题标题】：Why isn't the width of an image changing after I use "width: 8%;" in CSS?为什么我使用“width: 8%;”后图像的宽度没有改变在 CSS 中？
【发布时间】：2021-09-12 00:11:00
【问题描述】：

我是新来的反应，我试图用音乐笔记（只是一些图像）制作一个简单的网站，并希望每个音符在悬停在它上面时改变颜色。我知道我可以使用 :hover 来做到这一点，但我想尝试使用 useState 进行练习。我终于得到了切换功能（只是让它在悬停时改变颜色的功能）工作，但在这个过程中，宽度搞砸了。 css 的所有其他部分（位置、颜色等）都在工作，所以我对为什么宽度保持原来的宽度有点困惑。这是我目前拥有的代码。切换功能目前仅在 note3 上，因为那是我正在玩的音符。

第一段代码本质上是我的 index.js 文件的一部分，其中包含我正在处理的音符。

const Body = () => {

    const [isNote3, setNote3] = useState("true");
    const ToggleNote3 = () =>{
        setNote3(!isNote3);
    }

    const [isB1, setB1] = useState("true");
    const ToggleB1 = () =>{
        setB1(!isB1);
    }

    return (
        <div>
            
                <div className="sheetmusic">
                <img className="sheet" src={sheetmusic} />
                </div>
                

            <div className="notes">
               
                <div className={isNote3 ? "note3" : "n3"}>
                <img onMouseEnter={ToggleNote3 } src={note1} /> 
                </div>
        
            </div>
           
        </div>
    )
}

第二个sn-p是note3对应的相关css。

.n3{
    filter: invert(100%) sepia(26%) saturate(5791%) hue-rotate(58deg) brightness(116%) contrast(101%); 
    left: 25%;
    position: absolute;
    max-width: 8%;
    max-height: auto;
    top: 30%;
}

.note3 {
    position: absolute;
    left: 25%;
    max-width: 8%;
    max-height: auto;
    top: 30%;
 }

这也是我网站上当前情况的图片。（大注释是当前切换的注释）。 3

我已经尝试过一段时间，但似乎不知道问题所在。任何帮助将不胜感激，非常感谢。

【问题讨论】：

欢迎。请参阅How to Ask 并拨打tour。你没有达到我们的要求。（您想尝试调试图像吗？）

标签： javascript html css reactjs width

【解决方案1】：

从你的 CSS sn-p 两个类 note3 和 n3 具有相同的值 max-width 所以我不明白为什么宽度会改变。尝试使用不同的值。

编辑：默认情况下，在 CSS 中，img 的宽度和高度设置为自动。所以你需要做的是添加 img { max-width: 100%; } 将所有图像限制在父容器的宽度内。见https://codesandbox.io/s/relaxed-mcnulty-p72by?file=/src/styles.css

【讨论】：

非常感谢您的回答！我已经尝试过了，但我的问题似乎是，无论我将宽度更改为什么（可能是 100% 或 .1% 或 50px），当它出现在网站上时，它似乎都保持不变。你知道会发生什么吗？
@SofiaC 在 CSS 默认情况下 img 宽度和高度设置为自动。所以你需要做的是添加img { max-width: 100%; } 以将所有图像限制在父容器的宽度内。见codesandbox.io/s/relaxed-mcnulty-p72by?file=/src/styles.css