html - 调整我的页面大小使元素消失

标签 html css

当网页变得太小时,它的某些部分会消失,但我想让它保持原样,但无论它变得多小都会随页面调整大小。

Here's the problem

这是代码

<!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/

相关文章:

javascript - 为什么不在 body 元素上使用 Javascript 处理程序?

javascript - HTML 和 Javascript : How to manage element focus?

javascript - 如何使用JAVASCRIPT从输入标签获取值,输入标签的值是使用php从mysql数据库获取的

html - 创建网站的简单移动版本的最佳方法是什么?

javascript - 在 construct 2 html Canvas 上禁用点击事件传播

javascript - winjs ListView 水平滚动

html - 时事通讯中忽略了 z-index

html - 如何将 LaTeX Sweave 文件 (Rnw) 转换为 HTML?

html - 使列表项以特定方式相互重叠(顺序)

javascript - 为无序列表 <ul> 中的特定 <li> 元素设置样式