首页 \ 问答 \ 动态高度问题(Dynamic height issue)

动态高度问题(Dynamic height issue)

 我试图实现一个幻灯片，但它不完全动态。 图像部分动态调整大小，但无论浏览器窗口有多大，导航按钮/面板左右以及整个框/框都保持不变。 
 

 这部分代码似乎是问题，更确切地说，是“高度”线： 
 

.slides {
padding: 0;
width: 100%;
height: 840px;
display: block;
margin: 0 auto;
position: relative;
}

 

 我还不是很擅长html / css，但我尝试过将高度和宽度设置为auto或100％的各种组合。 
 

 这里是完整的CSS代码： 
 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

.slides {
padding: 0;
width: 100%;
height: 840px;
display: block;
margin: 0 auto;
position: relative;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 100;
height: 100;
display: block;
position: absolute;

transform: scale(1);

transition: all .7s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
}


.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;

  opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: rgb(255,133,102);
font-size: 156pt;
text-align: center;
line-height: 380%;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
opacity: 1;

transform: scale(1);

transition: opacity 1s ease-in-out;

}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}

.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(255, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(255, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(255, 0, 0, 1);
}
</style>

 

 任何人的想法？ 
 

 编辑： 
 

 @showdev 
 

 HTML部分： 
 

<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container" >
    <div class="slide">
        <img src="https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg" />
    </div>
    <div class="nav">
        <label for="img-6" class="prev">&#x2039;</label>
        <label for="img-2" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
    <div class="slide">
      <img src="https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg" />
    </div>
    <div class="nav">
        <label for="img-1" class="prev">&#x2039;</label>
        <label for="img-3" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-2" class="prev">&#x2039;</label>
        <label for="img-4" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-3" class="prev">&#x2039;</label>
        <label for="img-5" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-4" class="prev">&#x2039;</label>
        <label for="img-6" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-5" class="prev">&#x2039;</label>
        <label for="img-1" class="next">&#x203a;</label>
    </div>
</li>

<li class="nav-dots">
  <label for="img-1" class="nav-dot" id="img-dot-1"></label>
  <label for="img-2" class="nav-dot" id="img-dot-2"></label>
  <label for="img-3" class="nav-dot" id="img-dot-3"></label>
  <label for="img-4" class="nav-dot" id="img-dot-4"></label>
  <label for="img-5" class="nav-dot" id="img-dot-5"></label>
  <label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>

 

 

 现在只有两张相同的图片被链接，但是想法是这些图片都是相同的大小。 我根据另一个答案编辑了代码，最初忘记了两个百分比符号，现在图像与框对齐，但尺寸仅沿水平轴而非垂直轴调整。 其结果基本上是一个非常挤压的图像，总是具有相同大小的前后窗格/按钮并且高度一致。 这个问题被下调了，不知道为什么。 我一直试图想出一个解决方案，我只是不成功，因此我的职位在这里。 

I tried to implement a slideshow, but it's not fully dynamic. The image part resizes dynamically, but the navigation buttons/panels left and right as well es the overall box/frame stay the same, no matter how large the browser window.
 

This part of the code seems to be the issue, to be more exact, the "height" line:
 

.slides {
padding: 0;
width: 100%;
height: 840px;
display: block;
margin: 0 auto;
position: relative;
}

 

I am not that good at html/css yet, but I tried various combination of setting the height and width to auto or 100%.
 

Here is the complete css code:
 

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

.slides {
padding: 0;
width: 100%;
height: 840px;
display: block;
margin: 0 auto;
position: relative;
}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 100;
height: 100;
display: block;
position: absolute;

transform: scale(1);

transition: all .7s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
}


.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;

  opacity: 0;
z-index: 9;
cursor: pointer;

transition: opacity .2s;

color: rgb(255,133,102);
font-size: 156pt;
text-align: center;
line-height: 380%;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
opacity: 1;

transform: scale(1);

transition: opacity 1s ease-in-out;

}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}

.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(255, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(255, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
background: rgba(255, 0, 0, 1);
}
</style>

 

Anyone an idea?
 

Edit:
 

@showdev
 

HTML part:
 

<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container" >
    <div class="slide">
        <img src="https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg" />
    </div>
    <div class="nav">
        <label for="img-6" class="prev">&#x2039;</label>
        <label for="img-2" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
    <div class="slide">
      <img src="https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg" />
    </div>
    <div class="nav">
        <label for="img-1" class="prev">&#x2039;</label>
        <label for="img-3" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-2" class="prev">&#x2039;</label>
        <label for="img-4" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-3" class="prev">&#x2039;</label>
        <label for="img-5" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-4" class="prev">&#x2039;</label>
        <label for="img-6" class="next">&#x203a;</label>
    </div>
</li>

<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
    <div class="slide">
      <img src="" />
    </div>
    <div class="nav">
        <label for="img-5" class="prev">&#x2039;</label>
        <label for="img-1" class="next">&#x203a;</label>
    </div>
</li>

<li class="nav-dots">
  <label for="img-1" class="nav-dot" id="img-dot-1"></label>
  <label for="img-2" class="nav-dot" id="img-dot-2"></label>
  <label for="img-3" class="nav-dot" id="img-dot-3"></label>
  <label for="img-4" class="nav-dot" id="img-dot-4"></label>
  <label for="img-5" class="nav-dot" id="img-dot-5"></label>
  <label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>

 

 

Right now there are just two of the same picture linked, but the idea is that these are all the same size. I edited the code based on the other answer, forgot two percentage signs initially, and now the image is aligned with the box, but the size is only adjusting along the horizontal, not vertical axis. The result is basically a very squished image with always identically sized back and forth panes/buttons and consistent in height. This question got down-voted, not quite sure why. I have been trying to come up with a solution, I was just not successful, hence my post here.

原文：https://stackoverflow.com/questions/48454386
更新时间：2022-01-14 20:01

最满意答案

 只需向Application Controller添加一个方法，该方法禁止访问未经身份验证的用户（使用before_filter ），并为要为其授予访问权限的控制器覆盖此方法。 
 

 所以在应用控制器中： 
 

before_filter :only_authenticated_users_are_welcome

def only_authenticated_users_are_welcome
  !user.blank?
end

 

 并授予对某些页面及其控制器的访问权限： 
 

def only_authenticated_users_are_welcome
  true
end

 

 或者添加一些逻辑以仅授予对控制器内某些操作的访问权限。 

Just add a method to Application Controller that forbids access to nonauthenticated users (using before_filter) and overwrite this method for controllers where you want to give them access.
 

So in application controller:
 

before_filter :only_authenticated_users_are_welcome

def only_authenticated_users_are_welcome
  !user.blank?
end

 

And to grant access to some pages and in their controller:
 

def only_authenticated_users_are_welcome
  true
end

 

Or add some more logic to grant access only to some actions within the controller.

相关问答

更多

相关文章

更多
  • MyBatis动态参数order by的设置
  • Hadoop实战之动态添加节点
  • jsp页面表单和数据库之间的动态更新
  • 简单的动态树Jquery Ztree实现
  • 设计模式之代理模式（静态代理和动态代理）
  • 高负载低延迟：动态算法+Hadoop+AWS+NoSQL解析
  • 有没有javascript库提供获取浏览器高度的函数？当然，得跨浏览器！
  • MyBatis 动态 SQL详解
  • hibernate 动态查询
  • ROR study

    • 最新问答

    更多
  • python的访问器方法有哪些
  • 使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)
  • 透明度错误IE11(Transparency bug IE11)
  • linux的基本操作命令。。。
  • 响应navi重叠h1和nav上的h1链接不起作用(Responsive navi overlaps h1 and navi links on h1 isn't working)
  • 在C中读取文件：“r”和“a +”标志的不同行为(Reading a File in C: different behavior for “r” and “a+” flags)
  • NFC提供什么样的带宽？(What Kind of Bandwidth does NFC Provide?)
  • 元素上的盒子阴影行为(box-shadow behaviour on elements)
  • Laravel检查是否存在记录(Laravel Checking If a Record Exists)
  • 设置base64图像的大小javascript - angularjs(set size of a base64 image javascript - angularjs)
  • 想学Linux 运维 深圳有哪个培训机构好一点
  • 为什么有时不需要在lambda中捕获一个常量变量？(Why is a const variable sometimes not required to be captured in a lambda?)
  • 在Framework 3.5中使用服务器标签<％=％>设置Visible属性(Set Visible property with server tag <%= %> in Framework 3.5)
  • AdoNetAppender中的log4net连接类型无效(log4net connection type invalid in AdoNetAppender)
  • 错误：发送后无法设置标题。(Error: Can't set headers after they are sent. authentication system)
  • 等待EC2实例重启(Wait for an EC2 instance to reboot)
  • 如何在红宝石中使用正则表达式？(How to do this in regex in ruby?)
  • 使用鼠标在OpenGL GLUT中绘制多边形(Draw a polygon in OpenGL GLUT with mouse)
  • 江民杀毒软件的KSysnon.sys模块是什么东西?
  • 处理器在传递到add_xpath（）或add_value（）时调用了什么顺序？(What order are processors called when passed into add_xpath() or add_value()?)
  • sp_updatestats是否导致SQL Server 2005中无法访问表？(Does sp_updatestats cause tables to be inaccessible in SQL Server 2005?)
  • 如何创建一个可以与持续运行的服务交互的CLI，类似于MySQL的shell？(How to create a CLI that can interact with a continuously running service, similar to MySQL's shell?)
  • AESGCM解密失败的MAC(AESGCM decryption failing with MAC)
  • SQL查询，其中字段不包含$ x(SQL Query Where Field DOES NOT Contain $x)
  • PerSession与PerCall(PerSession vs. PerCall)
  • C＃：有两个构造函数的对象：如何限制哪些属性设置在一起？(C#: Object having two constructors: how to limit which properties are set together?)
  • 平衡一个精灵(Balancing a sprite)
  • n2cms Asp.net在“文件”菜单上给出错误（文件管理器）(n2cms Asp.net give error on Files menu (File Manager))
  • Zurb Foundation 4 - 嵌套网格对齐问题(Zurb Foundation 4 - Nested grid alignment issues)
  • 湖北京山哪里有修平板计算机的

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！