Question

好的，首先我要说我很新，所以这很明显，英语不是我的母语。

因此，我试图为虚构的面包店创建一个网站，并且该网站必须能够在计算机和电话上运行。现在，在根据分辨率努力缩放图像大小之后，我终于在添加以下内容后使其起作用：

           img {
            max-width: 100%;
             height: auto;
             }

但是，在此之后，我在div框中用于徽标等的图像拒绝完全保留在框中。另外，每当我尝试更改任何高度时，它都不会注册。当我切换到像素而不是百分比时，它可以工作，但是如果使用像素，则无法正确缩放网站。我删去了与此无关的所有代码

改回像素，但这会破坏缩放比例。

<head>
  <title>Framsida</title>
  <style type="text/css">
  </style>
  <style>
     img {
        max-width: 100%;
         height: auto;
         }
</style>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="text.css" />
</head>
<body>
    <div id="pageFS">
<div id="logo">
  <img src="bilder\logo.png" alt="logo" title="logo" width="100%" 
  height="100%">
</div>
  <div id="allBoxFS">
    <div id="rightBoxFS">
      <h1>Meny</h1>
        <div id="menuFS">
          <h2 class="one"><a href="Framsida.html">Framsida</h2></a>
          <h2 class="one"><a href="Bakverk.html">Bakverk</h2></a>
          <h2 class="one"><a href="omOss.html">Om Oss</h2></a>
          <h2 class="one"><a href="Priser.html">Priser</h2></a>
          <h2 class="one"><a href="Öppentider.html">Öppentider</h2></a>
          <h2 class="one"><a href="kontaktaOss.html">Kontakta Oss</h2></a>
        </div>
     </div>
     <div id="topBoxFS">
        <h1>Nyheter</h1>        
     </div>
     <div id="bottomBoxFS">         
    <h1>Framsida</h1>
     </div>      
     </div>
     <div id="bottomLogoFS">
      <img src="bilder\bott.png" alt="logo" title="logo" width="100%">
    </div>
  </div>
</body>

CSS:

#pageFS {
    width: 85%;
    height: 100%;
   border: 2px solid #3556ff;
    margin:0 auto;

}

#logoFS {
    width: 100%;
    height: 100%;
    border: 2px solid #ff1f3f;
}

#allBoxFS{
    width: 99.8%;
    height: 100%;
    background-color: #ffdff3;
     border: 0.1vw solid #ff8c1c;
}

#topBoxFS {
    width: 74%;
       height: 100%;
    border: 0.1vw solid #ff8c1c;
}

#bottomBoxFS {
    width: 74%;
    height: 100%;;
    border: 0.1vw solid #ff8c1c;
}

#rightBoxFS {
    width: 25%;
    height: 100%;
    border: 2px solid #3556ff;
    background-color: #ffdff3;
    float: right;
}

#menuFS {
    width: 100%;
    height: 600px;
    border: 2px solid #ff8c1c;
    padding-top: 5%;
}

#bottomLogoFS {
    width: 100%;
    height: 100%;
    border: 2px solid #ff1f3f;
}

我希望两个徽标都保留在其div框内。我还希望能够调整所有div框上的高度。

为什么不能更改div框或图像的高度？

0 个答案: