时间戳

首页 > 解决方案 > 为什么我最小化屏幕时图像没有改变大小？

html - 为什么我最小化屏幕时图像没有改变大小？

问题描述

为什么我把屏幕变小后图像没有改变大小？当我放大或缩小屏幕时，我想重新调整图像大小。这就是我尝试使用 VS 代码的方式。我是编程新手，所以我有点卡住了。任何帮助，将不胜感激。！

<!DOCTYPE html>
<html>
<head>
    <title>Pricing</title>
    <meta name="viewport" content="width:device-width initial-scale:1.0">

    <style>
        img{height:auto;
        width:fit-content}
    </style>
    
</head>

<body>
    <h1 style=font-family:impact;font-size:100px;color:darkblue;text-align:center> Class Fee 2021</h1>
    
    
    <table style="border: 1px solid black; width:75%;text-align:center">
    <tr style="background-color:royalblue;color:white">
        <th>Membership Type</th>
        <th>Class Limit (Per week)</th>
        <th>Weekly Fee</th>
    </tr>

    <tr>
        <td style="padding-left:10px;">basic Memebrship</td>
        <td style="padding-left:10px;">3</td>
        <td style="padding-left:10px;">50</td>
 </tr>
    </table>


<img src=boxingback.jpg  alt='wallpaper'>


</body>

</html>

标签： html

解决方案

更改width为“100%”（而不是width:fit-content，它不存在）并为标签中的src属性值使用引号：img

<!DOCTYPE html>
<html>

<head>
  <title>Pricing</title>
  <meta name="viewport" content="width:device-width initial-scale:1.0">

  <style>
    img {
      height: auto;
      width: 100%;
    }
  </style>

</head>

<body>
  <h1 style=font-family:impact;font-size:100px;color:darkblue;text-align:center> Class Fee 2021</h1>


  <table style="border: 1px solid black; width:75%;text-align:center">
    <tr style="background-color:royalblue;color:white">
      <th>Membership Type</th>
      <th>Class Limit (Per week)</th>
      <th>Weekly Fee</th>
    </tr>

    <tr>
      <td style="padding-left:10px;">basic Memebrship</td>
      <td style="padding-left:10px;">3</td>
      <td style="padding-left:10px;">50</td>
    </tr>
  </table>


  <img src="https://picsum.photos/seed/picsum/1200/900" alt='wallpaper'>


</body>

</html>

推荐阅读