html - 响应式标题图像 CSS

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 像素。

这是一个例子:

body{
  margin: 0;
}

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

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

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