Question

我很高兴完成这个项目，我已经接近了，但需要帮助。
我想立即下载按钮上的宽度等于书本的宽度吗？ http://www.orcaaccounting.com/freeStuff.html | 然后使图像尺寸适合移动设备。目前，该页面不适用于移动设备。任何其他指针，将不胜感激。

这是我的源代码的URL。

我不知道如何在此处插入代码。

Answer 1

如果这些是固定图像（即它们不会改变），那么您要做的就是手动将下载按钮的宽度设置为与图书图像的宽度相同：

<img src="downloadnowOrange.png" style="width:182px">

请注意，上面的代码被认为是错误的代码，但是它可以正常工作，并且由于网站的其余部分使用相同的样式，因此我们将其保留为如此。

如何找到按钮的正确宽度？如果您使用的是Google Chrome浏览器，则可以右键单击书籍图片，然后选择“检查元素”。这将打开Chrome的“ DevTools”窗口，并向您显示基础HTML。如果将鼠标悬停在img src上，Chrome将显示图像和宽度/高度尺寸。

几点：

您正在使用内联样式。这意味着您在样式元素的每个div / etc上都有样式属性。由于许多原因，这不是最佳的。解决这个问题很容易。为每个DIV赋予唯一的className，并在文档的head中使用样式创建样式标签，如下所示：

内嵌样式（错误）：

<div style="width:50px;height:80px;background:red;">
   <img src="healthyCooking.png" style="border:1px solid green;"/>
</div>

使用样式标签：

<head>
   <style>
      .redDiv{width:50px;height:80px;background:red;}
      .cookImg{border:1px solid green;}
   </style>
</head>
<body>
   <div class="redDiv">
      <img src="cookingBooking.png" class="cookImg" />
   </div>

这就是人们所谓的内联样式。尽量不要这样做。使用第二种方法，或者更好的方法是使用外部样式表。要将样式标签示例转换为外部样式表，只需将<style>和</style>标签之间的行移动-就像它们在外部文本文件中一样（例如mystyle.css），则头部变为：

<head>
   <link rel="stylesheet" href="mystyle.css" type="text/css" >
</head>

mystyle.css文件如下：

.redDiv{width:50px;height:80px;background:red;}
.cookImg{border:1px solid green;}

如何调整图片尺寸

1 个答案: