Блог

Главная - Вопросы по программированию - Почему размер изображения не меняется, когда я сворачиваю экран?

Почему размер изображения не меняется, когда я сворачиваю экран?

#html

#HTML #css — код #изображение

Вопрос:

Почему изображение не меняет размер, когда я делаю экран меньше? Я хочу изменить размер своего изображения, когда я делаю экран больше или меньше. это то, что я пытался сделать, используя VS code. Я новичок в программировании, так что я как бы застрял. любая помощь будет признательна.!

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

Комментарии:

1. Вам не хватает кавычек, которые могут быть или не быть проблемой. Кроме того, что такое f1? Вы имеете в виду h1? Под «сворачиванием» вы подразумеваете уменьшение размера экрана? Пожалуйста, очистите свой код и проясните проблему.

2. это мой второй день возни с html. Извините за отсутствие разъяснений

Ответ №1:

Измените 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>

Комментарии:

1. Большое вам спасибо, Йоханнес. Изменение ширины на «100%» исправило это для меня. Мне было интересно, работает ли это так же с фоновыми изображениями?