How to make images on our website responsive with CSS?-CodePudding

let me ask, so I have a web project, how do I make the images on my website responsive in any display? this is my code is there any error?

html code:
 <img src="image/Al-Khawarizmi.jpeg" >
css code:
@media screen and (max-width: 750px) {
  .img-load{
  width:100%;
  height:auto;
  } 
}

CodePudding user response：

You have a few options when it comes to making your image responsive.

With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.

Your image is not longer responsive if you start using px as a unit of measure for your height and width.

CodePudding user response：

You do haven't need to @media, if you want image width to cover the entire page width, in any device. only:

HTML:

<img src="image/Al-Khawarizmi.jpeg" >

CSS:

.img-load{
   width:100%;
}

You must use @media, only when you want your image to have different widths in any device.

For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:

CSS:

.img-load{
  height: auto;
}
@media screen and (max-width: 750px) {
  .img-load{
  width:100%;
  } 
}
@media screen and (max-width: 1200px) {
  .img-load{
  width:50%;
  } 
}