Question

如何将图像设置为响应的标题？我已经尝试过Bootstrap的img-responsive类，但在小屏幕上的高度很大。

我试过这个，但图片每次都有原始尺寸：

@media (max-height: 700px){
    .img-theme {
        display: block;
        width:auto;
        max-width:100%;
        height:250px;
    }
}

/* sm */
@media (min-height: 701) {
    .img-theme {
        display: block;
        width:auto;
        max-width:100%;
        height:275px;
    }
}
/* md */
@media (min-height: 999px) {
    .img-theme {
        display: block;
        width:auto;
        max-width:100%;
        height:400px;
    }
}
/* lg */
@media (min-height: 1200px) {
    .img-theme {
        display: block;
        width: auto;
        max-width:100%;
        height:500px;
    }
}

Answer 1

试试这个：

.img-theme{
  width: 100%;
  height: auto;
  max-heigth: 500px !important;
}

这应该根据宽度自动调整高度，100％使图像响应设备屏幕宽度。而且你的图像不会超过500像素。

以下是一个例子：

＆＃13;

body{
  margin: 0;
}

.img-theme{
  width: 100%;
  height: auto;
  max-height: 500px !important;
}

＆＃13;

<img class="img-theme" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg">

＆＃13;

您不需要使用媒体查询...只需将其放在您的全局css文件中。

Answer 2

不要使用宽度：自动宽度始终为100％;在任何决议现在它的工作正常检查一次

@media (max-height: 700px){
    .img-theme {
        display: block;
        width:100%;
        height:250px;
    }
}

/* sm */
@media (min-height: 701) {
    .img-theme {
        display: block;
        width:100%;
        height:275px;
    }
}
/* md */
@media (min-height: 999px) {
    .img-theme {
        display: block;
        width:100%;
        height:400px;
    }
}
/* lg */
@media (min-height: 1200px) {
    .img-theme {
        display: block;
        width: 100%;
        height:500px;
    }
}

<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg" class="img-theme"/>

响应式标题图像CSS

2 个答案: