在过去的几天里,我正在按照一个简单的分步教程布局(html / css)进行操作,但我无法使其具有响应能力,并且无法同时限制其屏幕大小。
这是我到目前为止的工作,以及我正在尝试做的事情:
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;
}
感谢您的任何帮助!
试试这个变体。我稍微重写了您的代码... https://codepen.io/opmasan/pen/jObdmdd
: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);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句