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


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 Without CSS



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>


Changing Image src Depending on Screen Size With CSS