Question

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

HTML CODE

       <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>

我试图将max-height用于图像旋转类，但是高度得到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
    }
}

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

2 个答案: