Change the size of an image by device

Question

How do I change the size of an image according to the device? I have the code below:

 <div class="header-outs" id="header">
    <div class="slider">
     <div class="callbacks_container">       
        <ul class="rslides" id="slider4">
              <li>
           <div class="slider-img one-img">
              <div class="container">
           <div class="slider-info ">
                    <div class="bottom-info">
                 <div class="col-mb-4">
                 <img src="images/logo.png" class="logoMarca">
              </div>
              <div class="col-md-12 text-center">
                 <p style="font-size: 48px;
                          line-height: 80px; 
                          font-weight: 800; 
                          margin-top: -12px; 
                          text-shadow: 2px 2px #000;">SEJA BEM-VINDO <br>AO NOSSO SITE</p>
                                                  </div>
              </div>
                 </div>
              </div>
           </div>
          </li>
    ....

In CSS I tried that way, but I couldn’t:

.logoMarca{
   width: 400px; 
   margin-top: -150px;
}
@media(max-width:991px){
   width: 280px; 
   margin-top: -100px;
}

I’m using Bootstrap 4 and I’ve tried img-Fluid, but nothing!

Answer 1

Use HTML5/CSS3 features (picture, srcset and Sizes) (See caniuse support)

https://css-tricks.com/responsive-images-css/

OR

Use bootstrap grid and responsiveness with multiple images

<div class="col-xs-4">
    <img src="images/logo.png" class="img-fluid">
</div>
<div class="col-md-4">
    <img src="images/logo2.png" class="img-fluid">
</div>
<div class="col-lg-4">
    <img src="images/logo3.png" class="img-fluid">
</div>

OR

Use multiple images and multiple classes

   <img src="images/logo.png" class="img-fluid logo">
   <img src="images/logo2.png" class="img-fluid logo2">
   <img src="images/logo3.png" class="img-fluid logo3">

   @media(max-width:991px){
      logo { display: none }
      logo2 { display: none }
      /* demais classes */
   }

OR

Use a div instead of img

<div class="logoMarca"></div>

.logoMarca{
   background-image: url("../images/logo.png"); /* Imagino que o CSS esteja em uma pasta separada*/
   background-size: contain;
   background-repeat: no-repeat;
   width: 400px; 
   margin-top: -150px;
}
@media(max-width:991px){
   width: 280px; 
   margin-top: -100px;
}

Answer 2

The way you wrote your @media is wrong! You have to repeat the class name within the { .logoMarca {...} } of @media or else CSS won’t know which element to apply the properties to. (Your error has nothing to do with Bootstrap or img-Fluid or grid)

In your code it is so see, note that you do not declare the class within the { } of @media

The right is to declare the CSS as below and so it should work!

.logoMarca {
	width: 400px;
	margin-top: -150px;
}

@media(max-width:991px) {
	.logoMarca {
		width: 280px;
		margin-top: -100px;
	}
}

<img class="logoMarca" src="https://placecage.com/100/100">

Answer 3

Uses css grid or flex-box but if you prefer with @media put (min-width: 991px) to minimize the screen not maximum Here’s my grid template if you want to take a look: https://pastebin.com/P2Lz0qJz