响应式标题图片 CSS答案

【问题标题】：Responsive Header Image CSS响应式标题图片 CSS
【发布时间】：2018-04-27 16:43:52
【问题描述】：

如何将图像设置为响应式标题？我已经尝试过 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;
    }
}

【问题讨论】：

使用 bootstrap + 设置 max-height: Xpx 到你的图像怎么样？
试试这个快捷键 -
你的最小高度是指什么？屏幕高度？

标签： html css responsive-design

【解决方案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;
}

&lt;img class="img-theme" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg"&gt;

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

【讨论】：

【解决方案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;
    }
}

&lt;img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg" class="img-theme"/&gt;

【讨论】：