jquery - 如何在 Bootstrap 缩略图类中修复特定媒体屏幕的图像大小？

Question

在 bootstrap 3 中，图像的高度和宽度应该针对不同的媒体屏幕是固定的。

注意:图像在 Bootstrap 的缩略图类中

示例:

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

我把css样式写成..

@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;
    }
}

由于 Bootstrap 的缩略图类无法为差异媒体屏幕修复图像大小。宽度根据媒体屏幕而变化，我希望对于特定媒体屏幕保持不变。

Answer 1

您希望图像具有固定宽度吗？

@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;
    }
}