#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%» исправило это для меня. Мне было интересно, работает ли это так же с фоновыми изображениями?