Question

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

这是代码

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

Answer 1

欢迎使用Stack Overflow！

首先，您的基本HTML结构应如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
    <!-- CONTENT -->
</body>

</html>

关于你的主要问题，尝试使用CSS来设置你的布局样式，而不是像width="33%"和其他人一样分配内联属性。现在，由于内联属性与应用于它们的样式不同，您的图像会拉伸。

通过在图片上使用这些属性，您告诉他们占其容器的33％，但图片不是 block elments 因此，他们需要在容器中，例如div。

e.g。

<div class="imageContainer">
  <img src="img.jpg" alt=""/>
</div>

我已经为你做了一个 JS Fiddle 。

当StackOverflow上的某人说“这里是一个小提琴”或类似的东西时，他们的意思是，他们创建了一个小的在线编码环境，作为您项目的sandbox。您有HTMl，CSS，Javascript和输出，以及添加外部内容的选项。 https://jsfiddle.net/

我已经在这里和那里改变了一些东西，向您展示一个基本用法的例子。请随意问你不明白的事情。

调整页面大小会使项目消失

1 个答案: