Issue
Why doesn't the image change size when I make the screen smaller? I want to make my image re-size when I make the screen bigger or smaller. this is what I was trying using VS code. I am new to programming so I am kinda stuck. any help would be appreciated.!
<!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>Solution
Change width to "100%" (instead of width:fit-content, which doesn't exist) and use quotes for the src attribute value in your img tag:
<!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>Answered By - Johannes Answer Checked By - Mildred Charles (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.