使用 HTML 将图片放入代码中时，有没有办法自动调整图片大小？

Question

所以我在 HTML 中制作了一个传记页面，我必须在其中放一张照片。这是我的代码：

<img src = "IMG_148672786044453.jpeg" height = "281" width = "179"
         alt = "picture of me"/>

这是我调整大小后的效果。有没有办法自动调整大小以获得合适的大小。

Answer 1

您应该对 CSS 中的所有图像 "sizing" 以及 html 的视觉呈现进行其他更改。将 class 添加到您的图像标签，例如 "bio-image"，并在您的 CSS 中设置样式，如下所示：

.bio-image {
    width: 179px //px scale of your image relative to its width
}

您可以通过将 "width" 替换为 "height"

来相对于其高度进行缩放

Answer 2

试试这个：Demo

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQuQ1LDwNtA8y5pylsvvBcWPBazSue1uPsFiBbUEghPBd9QrRmXSG7itA" style='width:100%;' border="0" alt="Null">
  </a>
</p>

如果采用流畅的布局，这应该会缩放您的图像。

使用 HTML 将图片放入代码中时，有没有办法自动调整图片大小？

Is there a way to auto-size pictures when placing them in code using HTML?

html

image