Html 设置为绝对定位背景的图像高度

在我的网站上，设置为旋转背景的图像的高度有问题。当分辨率改变时，有没有办法缩放图像，而不将其高度设置为刚性300px，是什么导致较小的设备出现图像下的可用空间问题

HTML代码

       <li>

        <div class="overlay"></div>

        <div class="image-rotation"> 
        <img src="files/img_02.jpg" alt="Tytuł filmu i kategoria" /> 
        <img src="files/img_03.jpg" alt="Tytuł filmu i kategoria" /> 
        <img src="files/img_04.jpg" alt="Tytuł filmu i kategoria" /> 
        <img src="files/img_05.jpg" alt="Tytuł filmu i kategoria" /> 
        </div>

        <article class="img-hover">
            <div class="row text-vertical">
              <div class="small-12 columns small-centered">

                <h1 class="text-center"><a href="#" title="title">two grils and one cup drinking togheter</a></h1>

                <div class="row">
                  <div class="small-6 columns small-centered">

                    <div class="row">

                      <dl class="small-4 columns text-center">
                        <dt><a href="#" data-tooltip data-options="disable_for_touch:true" class="own-tip tip-bottom" title="Dislike video">
                        <span class="icon-heart3"></span></a></dt>
                        <dd><span class="value">422</span></dd>
                        <dd><span class="name">likes</span></dd>
                      </dl>

                      <div class="small-4 columns text-center"><img src="img/sep.png" alt="" /></div>

                      <dl class="small-4 columns text-center">
                        <dt><span class="icon-eye3"></span></dt>
                        <dd><span class="value">323</span></dd>
                        <dd><span class="name">views</span></dd>
                      </dl>

                    </div>

                  </div>
                </div>

              </div>
            </div>
        </article>
    </li>

422
喜欢
323
意见

CSS代码：

<style>
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
background: url('../img/overlay.png');
}

.image-rotation {
width: 100%;
height: 300px;
position: relative;
}

.image-rotation img {
background-color: rgb(0, 0, 0);
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 4;
opacity: 1;
}

.img-hover {
width: 100%;
height: 100%;
position: absolute;
z-index: 11;
top: 0;
left: 0;
background: url('../img/img-hover.png');
opacity: 0;
transition: opacity .70s ease-in-out;
-moz-transition: opacity .70s ease-in-out;
-webkit-transition: opacity .70s ease-in-out;
cursor: pointer;
}
</style>

.覆盖{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：10；
背景：url（'../img/overlay.png'）；
}
.图像旋转{
宽度：100%；
高度：300px；
位置：相对位置；
}
.图像旋转{
背景色：rgb（0,0,0）；
位置：绝对位置；
顶部：0px；
左：0px；
显示：无；
z指数：4；
不透明度：1；
}
.img悬停{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：11；
排名：0；
左：0；
背景：url（'../img/img hover.png'）；
不透明度：0；
过渡：不透明度。70秒缓进缓出；
-moz过渡：不透明度。70秒缓进缓出；
-webkit过渡：不透明。70年代易入易出；
光标：指针；
}

我试图使用图像旋转类的最大高度，但高度为0px，图像不显示。请帮帮我！也许我们中有人找到了解决这个问题的办法

致以最良好的祝愿

---

库巴

昨天这帮了某人的忙

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

---

您可以通过媒体查询将多个CSS链接到您的网站

<link rel="stylesheet" media="screen and (min-width: 600px)" href="main.css" />
<link rel="stylesheet" media="mobile and (max-width: 600px)" href="different.css" />

---

我曾考虑过这样做——使用@media，但我希望有更灵活的方法：(

<link rel="stylesheet" media="screen and (min-width: 600px)" href="main.css" />
<link rel="stylesheet" media="mobile and (max-width: 600px)" href="different.css" />

@media mobile and (min-width: 600px) {
  .image-rotation {
        //your code here
    }
}