If your image appears too big or too small on a web page, you can use HTML coding to change the size with image attributes(Specify an Image Size). We can set the width and height of an image in pixels or as a percentage of the overall window size. This can enable you to combine your image nicely with the text and other content around them. make sure to carefully test your page when resizing images using HTML because too much stretching or shrinking can cause a loss of image quality.
Specify an Image size
Step 1: Click inside the <img> tag and type width=”?”, replacing? with the width measurement, you want to set.
Step 2: Type a space.
Step 3: Type height=”?” replacing? with the height measurement, you want to set.
we can also set the attribute value as a percentage. This tells the browser to display the image at a percentage of the browser window size. When giving a percentage value, be sure to follow it with a percent sign (%)
Result Output
<!DOCTYPE html>
<html>
<Head>
<Title>Coding thai</Title>
<style>
h1{
text-align: center;
text-transform: uppercase;
}
span.highlight{background-color: #ffcc99;}
body{
background-color: #ffffcc;
}
ul.horiz{
list-style-type: none;
padding: 0;
}
ul.horiz li{
float: left;
padding: 10px;
}
</style>
</Head>
<body>
<h1>Types of Web Developer</h1>
<hr>
<ul class="horiz">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About Us</a></li>
<li><a href="index.html">Contact Us</a></li>
<li><a href="index.html">Service</a></li>
</ul>
<br style="clear:both">
<ol>
<li>Frontend Developer</li>
<li>Back-end Developer</li>
</ol>
<Section class="First">
<p> <span class="highlight">A front end developer</span> has one general responsibility:
to ensure that website visitors can easily interact with the page.
and Back-end developers are the experts who build and maintain the mechanisms that
process data and perform actions on websites.</p>
</Section>
<img src="https://www.codingthai.com/wp-content/uploads/2023/01/How-To-Compile-Your-SASSSCSS-To-CSS-In-Visual-Studio-Code-1024x536.png" height="250" width="50%">
<hr>
<small> ©Copyright 2022 Codingthai</small>
</body>
</html>what size should I set for a web page image?
The best size for the image depends on how you want to use it on the web page. the vast majority of web users access pages with their monitors set at least 1024 pixels in width and 768 pixels in height. At these settings, the browser can usually display images 950 pixels in width and 600 pixels in height without requiring the user to scroll. making your images smaller can allow users to see more than one image at a time depending on the layout.
It is better to resize an imagee in an editing program or use HTML coding?
Resizing images using HTML can reduce the quality of your image, especially if you use HTML to enlarge them. Alos, shrinking an image using HTml Does not actually reduce its file size, which means the image does not download any faster. For these reasons, resizing image using an images editor if you have one is better. This enables you to maintain an iamge’s quality and optimize its files size.