CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
FlyingCat
FlyingCat

Reputation: 14250

How to set image be responsive in my case

I have an image that is small but I still need it to be responsive.

I use bootstrap and img-responsive class on it. 

<img class='col-lg-1 col-md-1 col-sm-1 img-responsive' id='ball' src='/ball.png'/>

My problem is even I use col-lg-1 the ball is still quiet big in my screen. I want it to be smaller than col-lg-1 but not sure how to do it in bootstrap. Can anyone help me about it? Thanks a lot!

Upvotes: 1

Views: 87

Answers (2)

technoY2K
technoY2K

Reputation: 2570

You can try to make your own class and then use a Sass breakpoint mixin, like this:::

.myImg {
    img {
    position:absolute;
    left: 0px;
    top: 0;
    right: 0;
    bottom: 0;
    @include respondto(phone, tablet) {
    min-width:30px;
    max-width:50px;}

Just change the parameters to what you need it to be.

Upvotes: 1

Will
Will

Reputation: 4155

You'll need to write some CSS.

/* replace "@screen-lg-min" with "1200px" if you're not using .less directly. */
@media (min-width: @screen-lg-min) { 
    #ball { max-width: 100px; } /* or whatever size you need. */
}

Upvotes: 0

Related Questions