响应式页眉图片 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;
    }
}

- Kinimod

---

使用Bootstrap + 将 max-height: Xpx 设置为您的图像如何？ - Eliran Levi

尝试使用这个快捷方式 - <img src= "" width="100%"/> - hemanjosko

你的min-height是指什么？屏幕高度吗？ - JHolub

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文件中即可。

- Marco Dal Zovo

Answer 2

不要使用width:auto，宽度始终为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"/>

- Samudrala Ramu