Question

以下是一些展示我问题的照片。

此区域的大部分区域是背景图像。有4个图像链接。中间有3个，左上角有一个。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href= "CSS/main.css">
</head>

<body>

   <div class = "tips">
      <a href="tips.html">
        <img src="Images/TipsLink.png" alt="Tips">
      </a>
   </div>

   <div class = "anchor">
      <a href="anchor.html">
       <img src="Images/PrintAnchorButton.png" alt="Anchor">
      </a>
   </div>

   <div class = "launch">
       <a href="launch.html">
         <img src="Images/LaunchAppButton.png" alt="Launch">
       </a>
   </div>

   <div class = "camera">
       <a href="camera.html">
          <img src="Images/PointCameraButton.png" alt="Camera">
       </a>
   </div>    
</body>
</html>

这些是由图像表示的简单链接。非常直截了当。

我使用CSS改变了他们的位置。背景图像应按不同的屏幕分辨率进行缩放，图像也应如此。图像链接无法1）调整大小，2）重新定位。

html{

   position: relative;
   height: 100%;
   width: 100%;
   background-image: url("../Images/WebsiteBackground22.png");
   background-size: 100%;
   background-repeat: no-repeat;
}


body{

}

.anchor {
    position: absolute;
    top: 37%;
    left: 17%;
}

.tips {
    position: absolute;
    top: 3%;
    left: 6%;
}

.launch {
    position: absolute;
    top: 65%;
    left: 39%;
}

.camera {
    position: absolute;
    top: 37%;
    left: 65%;
}   

I thought that putting the absolutely positioned image links inside the relative positioned body would allow the overall page to scale depending on screen size, and then the image links would scale with the page but they would also have set positions. This did not work as shown in the images.

我的目标是让图片随页面缩放，以便小页面的比例与我发布的第一张图片的比例相同。我在这里做错了什么？

Answer 1

img {
    display: block;
max-width: 100%;
height: auto;
vertical-align: middle;
}

试试这个，并避免屏幕上有多个图像的绝对位置

Div图像链接相对于页面调整大小调整大小

1 个答案: