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

Question

我遇到了一个问题，高度的图像设置为一个背景在我的网站上旋转。当分辨率变化时，有没有任何方法来缩放我的图像，而不将它们的高度设置为刚性300 my，是什么原因导致了图像下面自由空间较小的设备问题？

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>

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>

我试图使用最大高度的图像旋转类，但然后高度得到0 0px和图像不显示。请帮帮我!也许我们中有人有JS解决这个问题的办法？

诚挚的问候,

库巴

Answer 1

这个昨天帮了一个人。

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

给你头上的标签。

在CSS文件中：

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-table{
        [CSS CODE];
    }
}

/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-table{
        [CSS CODE];
    }
} 

Answer 2

您可以通过媒体查询将多个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" />

通过这种方式，您将首先加载普通的CSS，并为移动屏幕更改其他行。因此，您可以在其他文件中的较小分辨率上添加任何您想要更改的css。

如果只想使用一个CSS文件，也可以使用CSS内联媒体查询。

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