How to fix image size for particular media screen in bootstrap thumbnail class?

Question

Image height and width should be fixed for different media screens in bootstrap 3.

NOTE: The image is within Bootstrap's thumbnail class

Example:

<div class="thumbnail>
<img />
</div> 

I wrote css style as..

@media screen and (min-width: 970px)

{
    .thumbnail {    
        width: 291px !important;
    }

    .cardViewImage{
        height: 167px !important;
        width: 291px !important;
    }
}

@media only screen and (min-width: 1170px) 
{
    .thumbnail{
        width: 356px !important;
    }
    .cardViewImage{
        height: 204px !important;
        width: 356px !important;
    }
}

Due to Bootstrap's thumbnail class unable to fix image size for diff media screens. The width is changing according to media screen which I want to be unchanged for particular media screen.

Answer 1

You want the image to have a fixed width?

@media screen and (min-width: 970px)

{
    .thumbnail img{    
        width: 291px !important;
    }

    .cardViewImage{
        height: 167px !important;
        width: 291px !important;
    }
}

@media only screen and (min-width: 1170px) 
{
    .thumbnail img{
        width: 356px !important;
    }
    .cardViewImage{
        height: 204px !important;
        width: 356px !important;
    }
}

Answer 2

Please try this

@media screen and (min-width: 970px)

{
    .thumbnail {  
        max-width:100% !important;
        width: 291px !important;
    }

    .thumbnail img{
       width: 100% !important;
    }
}

@media only screen and (min-width: 1170px) 
{
  .thumbnail {  
        max-width:100% !important;
        width: 356px !important;
    }

    .thumbnail img{
       width: 100% !important;
    }
}

Hope it will be helpful. Thanks