当网页变得太小时,它的某些部分会消失,但我想让它保持原样,但无论它变得多小都会随页面调整大小。
这是代码
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<a href="c.html"><img src="c.png" alt="llllll" width="33%" height="100%" /></a>
<a href="n.html"><img src="n.png" alt="llllll" width="33%" height="100%" /></a>
<a href="m.html"><img src="m.png" alt="llllll" width="33%" height="100%" /></a>
</div>
</body>
最佳答案
欢迎来到 Stack Overflow!
首先,您的基本 HTML 结构应如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
关于您的主要问题,请尝试使用 CSS 来设置布局样式,而不是分配内联属性,例如 width="33%"
和其他类似的属性。现在,由于内联属性与应用于它们的样式不同,您的图像正在拉伸(stretch)。
通过在您的图像上使用这些属性,您告诉它们占其容器的 33%,但图像不是 block elments 因此,它们需要放在容器中,例如 div。
例如
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
我做了一个 JS Fiddle 供您亲自尝试。
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
我在这里和那里做了一些更改,以向您展示基本用法的示例。不明白的地方请随时提问。
关于html - 调整我的页面大小使元素消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37269837/