在我的情况下如何设置图像响应

Question

我的图像很小但我仍需要它才能响应。

我在其上使用bootstrap和img-responsive类。

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

我的问题是即使我使用col-lg-1我的屏幕上的球仍然很安静。我希望它小于col-lg-1但不确定如何在引导程序中执行此操作。任何人都可以帮我吗？非常感谢！

Answer 1

您可以尝试创建自己的类，然后使用Sass断点mixin，例如:::

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

只需将参数更改为您需要的参数。

Answer 2

你需要写一些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. */
}