1. View the properties of the images in the Images/Responsive folder that you downloaded from Canvas a. Append the width of each image to the file name of each image file - separate the original file name and width using a hyphen (ex: if the image name is BigCat.png and it has a width of 100px then rename it to BigCat-100.png)
this is what I have so far
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Lab3</title>
</head>
<body>
<h1>Images</h1>
<img
src="C:\Users\332bo\Desktop\Week_3_Lab\images/meeting-5793.jpg"
alt="A meeting"
width="100%">
<img
src="https://images.unsplash.com/photo-1631130576582-2119bf5189e3?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDF8MjFhcGMzVFVFVm98fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt="chair"
width="100%">
<img
src="C:\Users\332bo\Desktop\Week_3_Lab\images\responsive"
alt="sizes"
srcset="xl-box.png,
s-box.png,
m-box.png,
l-box.png"
sizes="100vw">
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
According to our guidelines, we answer first one only.
==================================================================
we use This code to to find the width of the given image.(in javascript)
var img = new Image();
img.onload=function(){
var width= img.width
//here to use the dimension
}
img.src=url;
Step by step
Solved in 3 steps with 2 images
