响应式内容,高度受限于屏幕尺寸

问题描述 投票:0回答:1

在过去的几天里,我正在做一个简单的分步教程布局(htmlcss),我不能让它同时响应和限制屏幕大小。

以下是我目前所拥有的东西和我正在努力做的事情。

enter image description here

enter image description here

HTML:

<div id="tutorial">
  <h1>Step 2 - Title</h1>
  <h3>Second step description / instructions</h3>
  <div id="content">
    <div id="ctrls">
      <img src="images/prev.png">
      <img src="images/stop.png">
      <img src="images/next.png">
    </div>
    <div id="image">
      <img src="images/step2.jpg">
    </div>
  </div>
  <div id="controls">
    <div class="btn prev">
      <img src="images/btn_prev.png">
    <div class="btn next">
      <img src="images/btn_next.png">
    </div>
  </div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}
html, body {
    overflow: hidden;
    font-family: Arial;
}
#tutorial {
    width: 100%;
    height: 100vh;
    background-color: #FFFFCC;
}
h1 {
    padding: 20px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
h3 {
    font-size: 20px;
    text-align: center;
    font-weight: normal;
}
#content {
    display: table;
    margin: 0 auto;
    padding: 16px;
    height: calc(100vh - 220px);
    background-color: #E6E6E6;
}
#content #image {
    position: relative;
}
#content #image img {
    width: 100%;
    height: 100%;
    max-height: 100%;
}
#content #ctrls {
    position: absolute;
    z-index: 99;
    display: table;
    padding: 2px;
}
#content #ctrls img {
    width: 48px;
    height: auto;
    float: left;
}
#controls {
    display: table;
    margin: 4px auto;
}
#controls .btn {
    margin-top: 6px;
    float: left;
}
#controls .prev {
    margin-right: 10px;
}
#controls .next {
    margin-left: 10px;
}
#controls .off {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#controls .btn img {
    border: 0;
}

谢谢你的帮助

html css
1个回答
0
投票

试试这个变体。我重写了一下你的代码......https:/codepen.ioopmasanpenjObdmdd。

:root {
  --header-height: 100px;
  --footer-height: 200px;

}

*{
    margin: 0;
    padding: 0;
}
html, body {
    font-family: Arial;
}
#tutorial {
    width: 100%;
    height: 100vh;
    background-color: #FFFFCC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1 {
    padding: 20px;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
h3 {
    font-size: 20px;
    text-align: center;
    font-weight: normal;
}
#content {
    display: flex;
    padding: 16px;
    background-color: #E6E6E6;
}
#content #image {
    position: relative;   
}
#content #image img {
    height: calc(100vh - var(--header-height) - var(--footer-height));
    max-height:100%;
    max-width: 100%;
    object-fit: cover;
}
#content #ctrls {
    position: absolute;
    z-index: 99;
    width: 100px;
    height: 50px;
    background-color: #3AE2CE;
}
#controls {
    display: flex;
    margin: 4px auto;
}
#controls .btn {
    margin-top: 6px;
    float: left;
}
#controls .prev {
    margin-right: 10px;
}
#controls .next {
    margin-left: 10px;
}
#controls .off {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

0
投票

移除 height: calc(100vh - 220px); 从你的content div。

然后,只需声明div的大小,并使图像大小为100%。

#image{
height:200px;
width:200px;
}

#image img{
height:100%;
width:100%;
}

0
投票

https:/codepen.ioopmasanpenJjYxJgv。这个变体在html中加入了object-fit: contain和一些修正,效果会更好。

#content #image img {
  object-fit: contain;
}
热门问题
推荐问题
最新问题