图像未调整的 HTML 链接答案

【问题标题】：HTML Link with Image Not Adjusted图像未调整的 HTML 链接
【发布时间】：2019-12-28 03:05:00
【问题描述】：

我对 HTML/CSS 比较陌生，并且正在尝试创建的网站中发现一个基本错误。

我正在使用外部 CSS 文件来设置我的网站的样式，并且我使用以下代码作为我的 HTML 链接的一般准则。

a:link, a:visited{
    background-color: #000000;
    color: white;
    padding: 14px 25px;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
}
a:active, a:hover{
    background-color: rgb(46, 46, 46);
    color: white;
}

在我将我的 styles.css 文件链接到我的 HTML 文件（通过链接）后，我希望在屏幕的右上角有一个标准徽标，单击它时会将用户带到主屏幕。但是，我不想设置特定的像素大小，而是希望它覆盖特定百分比的屏幕，以便网站在手机和计算机上看起来很自然（而不是太大/太小）。我试图在下面这样做，虽然图像的比例正确，但当我将鼠标悬停在标签上时仍然遇到问题，图像周围似乎有一个边框亮起（甚至虽然我不希望它）。这是我用来添加徽标的代码：

<a href="index.html" style="float:right; padding:0px 0px;">
         <img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>

我很确定将百分比添加到宽度和高度是非法的，对吧？我也很好奇为什么这似乎适用于高度，而不适用于宽度，如果这样做有什么缺陷，请告诉我。这是此代码将导致我的徽标的输出：

在上图中，我没有将鼠标悬停在图像上。徽标占用的空间超出了我的预期，并且有边框。

当我用鼠标悬停在上面的图像上时，它显示了我的徽标。注意它周围的边框会改变颜色，如果你点击这个区域，那么它会将它重定向到主页（这是我想要它做的，但我想将点击区域最小化到只是徽标的图片，而不是它周围的空间，我想去掉徽标周围的边框）。

【问题讨论】：

标签： html css

【解决方案1】：

在 CSS 中有一个属性叫做大纲

a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
outline: none;

}

这将删除当您将鼠标悬停在其上时突出显示的边框

【讨论】：

【解决方案2】：

你的问题不是很清楚。

最好展示您的实时网站或将您的代码放在 CodePen 或 JSFiddle 等网站上，以便其他人可以测试以检查问题。

顺便说一句，您也可以在这里发布您的代码。

【讨论】：

【解决方案3】：

您可以试试这个，但请阅读以下内容：:)

a:link, a:visited{
    background-color: #000000;
    color: white;
    padding: 14px 25px;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
    border: none; /* <-- add this */
}

a:active, a:hover{
    background-color: rgb(46, 46, 46);
    color: white;
}

据我所见：我怀疑边界（和 box-shadow ？）来自父节点。你可以使用浏览器的inspector，点击边框，识别出我们想要的html标签，给他下药：

{
    border: none;
    box-shadow: none;
}

我很确定将百分比添加到宽度和高度是非法的，对吧？

SWAT 不会出现在您的位置，尽管我们倾向于直接在 HTML 文件中避免这种情况。

此外，最好不要将样式放入 HTML 文件本身，因为它可能会覆盖编写在 css 文件上的某些规则。如果你不了解 CSS 的特殊性，here is a good read。

虽然在 CSS 文件上没问题。我自己通常把 max-width: 100% 放到图片上，我会根据需要改变它的父 div 的宽度和高度。

我不想设置特定的像素大小，而是希望它覆盖屏幕的特定百分比

这太完美了！你知道vw 和media queries 吗？

【讨论】：