Media Query to resize image struggle

user_18712368 0
Viewed 48

I have tried using media query to resize images on my page according to screen-size but it didn't work , need help.

Here is the relevant code of images in my html :

<body>



<div class="img certhtml"></div> 
    <div class="img certcss"></div> 
    <div class="img certjs"></div> 
    <div class="img certphp"></div> 

 </body>

</html>

Here is the relevant css pertaining to the class:

.img {

  width: 836px;
  height: 588px;
  border: 4px solid #38b6ff;
  margin: 5px;
  background-size: cover;
  background-repeat: no-repeat ;
  margin: auto;
 }



.certhtml {

  background-image: url("images/SW_html5_foundations.png");
}

.certcss {

  background-image: url("images/SW_css3_foundations.png");

}

.certjs {

  background-image: url("images/SW_javascript_foundations.png");
}

.certphp {

  background-image: url("images/SW_php_7_foundations.png");
}

This code allows the images to be seen clearly on full screen ,when screen width goes down below 776px then it buggers up the images.

I tried using

@media and (max width:776px) {

.img{height:60%;width:60%}

}

Tried lots of fiddling about but didn't work

but to no avail, would appreciate help, thanks.

media-queries css
1 Answers

If you have an image inside the div, for example

<div class="img certcss"><img src="https://example.com/sample.jpg" alt="you own alt"></div>

Then you should apply the correct CSS selector to the IMG, and also you need to correct the media selector

   @media only screen and (max-width: 776px) {
      .img img {
         height:60%;
         width:60%;
      }
    }

You could also do width 100% and add-in

.img img {
 object-fit: cover;
}

Which will ensure the full responsiveness of the image.

user_155166960
Related