Question

所以我想减少标题上img的大小，使其看起来更干净，更清晰，但是我不确定该怎么做？

这是代码

CSS：

.header {
   background: #000000 url (C:/website/logo final.svg) no-repeat;
  background-size: 80px 60px;
}

HTML：

<header>
    <div id="header" align="center">
    <img name="Antique Picture" src="C:\website\logo.jpg
    " alt="logo" width="100%" height="100%">
    </header>

所有的帮助都会受到赞赏而不是

Answer 1

我要解决这个问题。正如Michael Coker所说，HTML结构中存在许多需要修复的缺陷：

1）不推荐使用align属性。我们将使用CSS覆盖它。

2）图像宽度必须是基于像素的，或者用CSS覆盖。

3）标题div未关闭。

4）您提供了本地图片，因此我们无法访问它们，这意味着我们无法检查它们是否模糊。

此外，img标记没有属性name，并且背景图片网址必须没有空格和文件路径周围的引号。我忽略了这样一个事实，即在文件名中有空格是不好的做法，因为它可以在空间中使用。

解决这些问题，您的新结构如下所示：

<强> HTML

<header>
  <div id="header">
    <img src="C:\website\logo.jpg" alt="logo">
  </div>
</header>

<强> CSS

.header {
  background: #000000 url('C:/website/logo final.svg') no-repeat;
  background-size: 80px 60px;
}

要集中标题，您需要在CSS中添加text-align: center：

.header {
  background: #000000 url('C:/website/logo final.svg') no-repeat;
  background-size: 80px 60px;
  text-align: center;
}

要正确调整图像宽度，您也应该使用CSS：

.header img {
  width: 100%;
  height: 100%;
}

请注意，基于百分比的宽度相对于父元素。标题父元素将需要高度和宽度，以便图像子项适应。如果您喜欢固定图片宽度，则应以像素为单位指定这些值：

.header img {
  width: 100px;
  height: 100px;
}

然后，如果你发现它被拉伸，你可以调整上面的像素值（或图像本身，如果这更容易）。

希望这有帮助！

需要帮助将标题img调整为正确的大小

1 个答案: