han*_*ter 18 html css limit screen-size
我正在尝试创建一个php库,这就是为什么我需要一个好的Mask,以后可以显示图片.我希望Mask不要大于屏幕大小.我的意思是,必须没有滚动,整体<body>需要只有浏览器窗口的宽度和高度,这样每个子对象<body>都限制在浏览器的帧大小,如果溢出则会缩小.我试着max-width和max-height上<body>,但它不工作.
这是我的代码:
index.html的:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mother">
<div id="header">
<div id="back-link">
<a href="../">Home</a>
</div>
<div id="prev">
<a href="">next picture</a>
</div>
<div id="next">
<a href="">previous picture</a>
</div>
<div id="headline">
<p class="h2">Our Galery</p>
</div>
</div>
<!-- Content -->
<div id="container-bild">
<img src="./bilder/P1130079.JPG" id="img-bild" />
</div>
</div>
</body>
</html>
style.css中:
body {
max-width: 100%;
max-height: 100%;
}
/* mother-container */
div#mother {
max-width: 100%;
max-height: 100%;
margin: auto;
}
/* main-container */
#container-bild {
max-width: 100%;
max-height: 100%;
}
/* picture in main-container */
#img-bild {
max-width: 100%;
max-height: 100%;
border: 1px solid #280198;
}
kzh*_*o14 30
如果您希望高度恰好是视图屏幕的100%,并且宽度相同,请使用
height: 100vh;//100% view height
width: 100vw;// 100% view width
.
div {
background-color: blue;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
color: white;
}<div>some content here</div> 尝试：
html,
body {
height: 100%;
}
body {
overflow: hidden;
}
您知道您的图库中有多少子元素吗？如果元素的数量是静态的，您可以使用 vw 和 vh 单位在 CSS 中简单地设置它们的尺寸。不涉及 JavaScript，元素永远不会溢出你的身体。
作为对未来的自己的提醒：
.book {
margin: auto;
width: 100vh;
max-width: 100vw;
min-width: 500px;
}
虽然这完全无关，但对于链接，您可能需要使用以下内容：
a[href^="#"] {
text-decoration: none;
color: black;
background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
text-decoration: underline;
color: blue;
background: none;
}
| 归档时间： |
|
| 查看次数： |
52490 次 |
| 最近记录： |