How to apply this image fullscreen and make it responsive to any screen-CodePudding

Here is the I'm editing right now.

I want the images to be stretched removing the white lines on both sides and make it responsive to any different screen. I tried every code but it doesn't seem to work. Below is the code I'm using right now.

<div >
    <img src="https://i.ibb.co/4mpnwdX/01.jpg" alt="Afiiliate 1" style="display: flex; height: auto; border: 0; width: 100%;" />
</div>
<div >
    <img src="https://i.ibb.co/QJ3gmqz/02.jpg" alt="Affiliate 2" style="display: flex; height: auto; border: 0; width: 100%" />
</div>
<div >
    <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" style="display: flex; height: auto; border: 0; width: 100%" />
</div>

CodePudding user response：

Remove other styles from image. Width:100% stretches images and max-width:100% makes images responsive.

 <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" style="width:100%;max-width:100%;" />

CodePudding user response：

Browsers add default styling to some elements. For example if you inspect the body element in your browser's dev tools facility you will probably see there is a margin set by the system.

You can remove all the default margins (and other things if needed) by putting a setting at the top of your stylesheet.

This snippet demonstrates this using your code:

* {
  margin: 0;
  padding: 0;
}

<div >
  <img src="https://i.ibb.co/4mpnwdX/01.jpg" alt="Afiiliate 1" style="display: flex; height: auto; border: 0; width: 100%;" />
</div>
<div >
  <img src="https://i.ibb.co/QJ3gmqz/02.jpg" alt="Affiliate 2" style="display: flex; height: auto; border: 0; width: 100%" />
</div>
<div >
  <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" style="display: flex; height: auto; border: 0; width: 100%" />
</div>

CodePudding user response：

<style>
    body{
        margin: 0;
    }
    img{
        width: 100%;
    }
</style>



<div >
    <img src="https://i.ibb.co/4mpnwdX/01.jpg" alt="Afiiliate 1">
</div>
<div >
    <img src="https://i.ibb.co/QJ3gmqz/02.jpg" alt="Affiliate 2" />
</div>
<div >
    <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" />
</div>

CodePudding user response：

Try providing the width and height of the images to 100%

<style>
*{
  margin: 0;
  height:100%;
  Width:100%;
  padding:0;
}
</style>
<div >
  <img src="https://i.ibb.co/4mpnwdX/01.jpg" alt="Afiiliate 1" style="display: flex; height: auto; border: 0; width: 100%;" />
</div>
<div >
  <img src="https://i.ibb.co/QJ3gmqz/02.jpg" alt="Affiliate 2" style="display: flex; height: auto; border: 0; width: 100%" />
</div>
<div >
  <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" style="display: flex; height: auto; border: 0; width: 100%" />
</div>

CodePudding user response：

Try using background-size:cover to the img attribute

img{
    background-size:cover;
    }

<style>
*{
  margin: 0;
  padding:0;
}
img{
background-size:cover;
}
</style>
<div >
  <img src="https://i.ibb.co/4mpnwdX/01.jpg" alt="Afiiliate 1" style="display: flex; height: auto; border: 0; width: 100%;" />
</div>
<div >
  <img src="https://i.ibb.co/QJ3gmqz/02.jpg" alt="Affiliate 2" style="display: flex; height: auto; border: 0; width: 100%" />
</div>
<div >
  <img src="https://i.ibb.co/NpBKjPJ/03.jpg" alt="Affiliate 3" style="display: flex; height: auto; border: 0; width: 100%" />
</div>