HTML 視口大小問題（100vw ≠ 100% 寬度）

Question

在下面的一段代碼中，我試圖使圖片（紅色方塊）的寬度等於我的 - 最新 - 瀏覽器視口的寬度。 然而，所述圖片的大小與后者相差甚遠（從這張圖片中可以看出）。 圖片高1560px，寬1560px。

attribute or trying to change the picture's height with instead, and nothing worked.我已經嘗試了所有可以在網上找到的潛在解決方案，包括使用帶有屬性的 <picture> 標簽或嘗試使用更改圖片的高度，但沒有任何效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foo</title>
  </head>
  <body>
    <img src="bar.jpg" width="100vw" alt="bar">
  </body>
</html>

)?如何在保持相對於視口的寬度的同時解決這個大小問題（因此不使用諸如類的修復程序）？

Answer 1

<img>寬度屬性總是無單位的，指的是像素。

width ：圖像的固有寬度（以像素為單位）。

要使用vw單位應用寬度，您必須使用 CSS。

<style>
    .full-width {
        width: 100vw;
    }
</style>
<img src="bar.jpg" class='full-width' alt="bar">

Answer 2

您需要使用樣式屬性style="width:100vw" ，而不是width 屬性。 width 屬性總是以像素為單位，所以width="100vw"被翻譯成width="100px"

HTML 視口大小問題（100vw ≠ 100% 寬度）

問題描述

2 個解決方案

解決方案1
2 已采納 2019-07-22 21:06:16

解決方案2
1 2019-07-22 21:06:52

HTML 視口大小問題（100vw ≠ 100% 寬度）

問題描述

2 個解決方案

解決方案1 2 已采納 2019-07-22 21:06:16

解決方案2 1 2019-07-22 21:06:52

解決方案1
2 已采納 2019-07-22 21:06:16

解決方案2
1 2019-07-22 21:06:52