Hello Viewer, Today in this blog you’ll Find Code Image Changing Image src Depending on Screen Size. Earlier I have shared many blogs on Image Changing and now I’m going to create a Changing Image src Depending on Screen Size.
Changing Image src Depending on Screen Size Without CSS
Here you’ll Find Code Changing Image src Depending on Screen Size Without CSS . Earlier I have shared many blogs on Image Changing and now I’m going to create a Changing Image src Depending on Screen Size Without CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<picture>
<source media="(min-width:600px)" srcset="img/2.jpg">
<source media="(min-width:700px)" srcset="img/3.jpg"><source media="(min-width:800px)" srcset="img/4.jpg">
<img src="img/1.jpg" alt="img not found">
</picture>
</body>
</html>
Changing Image src Depending on Screen Size With CSS
Here you’ll Find Code Changing Image src Depending on Screen Size With CSS. Earlier I have shared many blogs on Image Changing and now I’m going to create a Changing Image src Depending on Screen Size With CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width: 767px){
#main-img{
content:url("img/1.jpg");
}
}
@media screen and (min-width: 768px) {
#main-img{
content:url("img/2.jpg");
}
}
@media (min-width: 992px){
#main-img{
content:url("img/3.jpg");
}
}
@media (min-width: 1200px) {
#main-img{
content:url("img/4.jpg");
}
}
</style>
</head>
<body>
<div class="container" id="at-header">
<img class="image" id="main-img" src="img/img-5.jpg" />
</div>
</body>
</html>
0 Comments