CODEWITHSUNDEEP
htmlcss
Gabriel R
Gabriel R

Reputation: 107

HTML Viewport Size Issue (100vw ≠ 100% of width)

In the following piece of code, I have attempted to make the width of a picture (a red square) equal to that of my — up to date — browser's viewport. However, the size of said picture is far from the latter's (as can be seen in this picture). The picture is 1560px high and 1560px wide.

I've tried every potential solution I could find online, including using the <picture> tag with the sizes attribute or trying to change the picture's height with vh instead, and nothing worked.

<!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>

How can I fix this sizing issue while keeping the width relative to the viewport (and therefore not using a fix such as width: 100%;)?

Upvotes: 2

Views: 308

Answers (2)

j08691
j08691

Reputation: 207861

You need to use the style property, style="width:100vw", not the width attribute. The width attribute is always in pixels, so width="100vw" is translated into width="100px"

Upvotes: 1

Sean
Sean

Reputation: 8036

The <img> width attribute is always unit-less, and refers to pixels.

width: The intrinsic width of the image in pixels.

To apply a width with vw units, you must use CSS.

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

Upvotes: 2

Related Questions