HTML/CSS 裁剪图像 [关闭]答案

【问题标题】：HTML/CSS cropping images [closed]HTML/CSS 裁剪图像 [关闭]
【发布时间】：2015-12-08 17:32:07
【问题描述】：

所以我的网站上有一个徽标，问题是当您将鼠标悬停在其下方或周围时，您仍然可以单击它。我希望它只能点击一次。

标志位于右上角！

【问题讨论】：

【解决方案1】：

如果您右键单击您的徽标并单击“检查元素”，您将能够看到您的图像区域实际上是 200px x 200px。

尝试在底部裁剪掉您的徽标额外高度（以及顶部的额外高度我猜您在顶部也有额外高度，因为您将标题 img margin-top 设置为 -68px 以向上推动您的徽标）使您的徽标的总高度为 70 像素。这将与您的标题相匹配。

接下来，在你的 css 中更改它：

header img {
    margin-top: -68px;
    float: left;
    width: 200px;
    height: 200px;
    float: left auto;
}

到：

 header img {
    float: left;
    width: 200px;
    height: 70px;
    float: left auto;
}

【讨论】：

所以基本上我必须回到 Photoshop，因为当我改变它时它会做同样的事情但更小......？
是的，请返回到 Photoshop 以切除徽标底部的多余区域。或者，如果您使用的是 Windows，则可以只使用 Microsoft Windows 中的 Paint 来完成。
最好的做法是在您的网站上显示与您从文件中加载的原始图像完全相同的图像大小。这将使您的网站加载速度更快，因为您的程序不需要以编程方式为您调整图像大小。
非常感谢 :) 这也解决了我遇到的另外两个问题！
嘿，没问题！ :) 好网站！

【解决方案2】：

最好的解决方案是适当地裁剪图像，但您可以通过将这个 css 规则添加到您的图像来解决它：

overflow: hidden

请注意，这将隐藏部分图像，因此如果您在 Anime Database 下有内容，它将被隐藏。

【讨论】：

【解决方案3】：

看这张图片：

正如大家所说，裁剪图像是最好的解决方案。

【讨论】：

【解决方案4】：

header {
    overflow: hidden;
}

【讨论】：