黑色Ace 发表于 2024-8-21 09:38

html练习，图片显示问题请教

本帖最后由 黑色Ace 于 2024-8-21 09:42 编辑

【写在前面】我知道我写的很烂，其实是在其他模版上自己瞎改的，没有系统学过，但因为急用，所以请大伙轻点喷~
【想要效果】创建840*750大小的区域，其中第一行是photo1，占840*100，第二行是photo2和photo3并排，分别占420*650。三个区域初始显示旧图，鼠标移动到任一区域，会显示该区域的新图，且对应区域的边框有亮色提示，点击对应区域可以跳转网页
【实际效果】

【存在问题】
问题一：photo2和photo3无法并排，测试发现photo3的width小于等于410px时可以并排，但整体格式未对齐

问题二：图片下方出现一条空白区域，查阅发现和“基线对齐”相关，但已经添加了“display: block;”，且也试过“vertical-align:middle;”，都是一样的情况【感谢~】请大伙麻烦帮看看问题出在哪里，该怎么修改，万分感谢！【源代码】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<html>
<head>
<style type="text/css">
/** 重置浏览器默认标签样式 */
* {
margin: 0;
padding: 0;
}
body {
background-image: url(img/background.jpg);
background-size: cover;
}
.xttblog {
width: 840px; /** 大框宽 */
height: 750px; /** 大框高 */
margin-top: 30px; /** 顶距 */
margin-left: auto;
margin-right: auto;
color: black;
}
.box {
list-style-type: none;
}
.box:after {
content: ".";
display: block;
line-height: 0;
width: 0;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.box li {
float: left;
}
.box li a, .box li a:visited {
display: block;
border: 5px solid #ccc; /** 框线厚度 */
margin-left: -5px; /** 框线重叠 */
margin-top: -5px; /** 框线重叠 */
position: relative;
z-index: 1;

}
.box li a:hover {
border-color: rgb(233, 99, 121);
z-index: 2;
}
</style>
</head>
<body>
<div class="xttblog">
<ul class="box">
<li><a class="photo1" target="_blank" href="../1/1.html"><img src="img/1.jpg" onmouseover='this.src="img/1-after.jpg"' onmouseout='this.src="img/1.jpg"' width="840px" height="100px" /></a></li>
<li><a class="photo2" target="_blank" href="../2/2.html"><img src="img/2.jpg" onmouseover='this.src="img/2-after.jpg"' onmouseout='this.src="img/spring.jpg"' width="420px" height="650px" /></a></li>
<li><a class="photo3" target="_blank" href="../3/3.html"><img src="img/3.jpg" onmouseover='this.src="img/3-after.jpg"' onmouseout='this.src="img/summer.jpg"' width="420px" height="650px"/></a></li>
</ul>
</body>
</html>

风子是我 发表于 2024-8-21 12:15

对`.box li`的宽度设置为`50%`，这样两个图片就可以并排显示。同时，移除了每个`<img>`标签的固定宽度和高度，并设置了`.box img`的宽度和高度为`100%`和`auto`，这样图片就会自动调整大小以适应其父元素`<a>`的尺寸，同时保持图片的原始比例。

注意，由于`<li>`的宽度设置为`50%`，所以这里假设只有两个图片要并排显示。如果有更多的图片需要并排显示，那么`<li>`的宽度应该相应调整为`100% / 图片数量`。

apull 发表于 2024-8-21 14:26

尺寸要考虑边框。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>

    <style type="text/css">
      /** 重置浏览器默认标签样式 */
      * {
            margin: 0;
            padding: 0;
      }

      body {
            background-image: url(img/background.jpg);
            background-size: cover;
      }

      .xttblog {
            width: 840px;
            /** 大框宽 */
            height: 750px;
            /** 大框高 */
            margin-top: 30px;
            /** 顶距 */
            margin-left: auto;
            margin-right: auto;
            color: black;
      }

      .box {
            list-style-type: none;
      }

      .box:after {
            content: ".";
            display: block;
            line-height: 0;
            width: 0;
            height: 0;
            clear: both;
            visibility: hidden;
            overflow: hidden;
      }

      .box li {
            float: left;
      }

      .box li a,
      .box li a:visited {
            display: block;
            /* border: 5px solid #ccc; */
            /** 框线厚度 */
            /* margin-left: -5px; */
            /** 框线重叠 */
            /* margin-top: -5px; */
            /** 框线重叠 */
            position: relative;
            z-index: 1;

      }

      .box li a:hover {
            border-color: rgb(233, 99, 121);
            z-index: 2;
      }
    </style>
</head>

<body>
    <div class="xttblog">
      <ul class="box">
            <li><a class="photo1" target="_blank" href="../1/1.html"><img src="img/1.jpg"
                        onmouseover='this.src="img/1-after.jpg"' onmouseout='this.src="img/1.jpg"' width="840px"
                        height="100px" /></a>
            </li>
            <li>
                <ul class="box" style="display: flex;">
                  <li><a class="photo2" target="_blank" href="../2/2.html"><img src="img/2.jpg"
                              onmouseover='this.src="img/2-after.jpg"' onmouseout='this.src="img/spring.jpg"'
                              width="420px" height="650px" /></a>
                  </li>
                  <li><a class="photo3" target="_blank" href="../3/3.html"><img src="img/3.jpg"
                              onmouseover='this.src="img/3-after.jpg"' onmouseout='this.src="img/summer.jpg"'
                              width="420px" height="650px" /></a>
                  </li>
                </ul>
            </li>

      </ul>
</body>

</html>

黄小明同学 发表于 2024-8-21 14:36

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test</title>
</head>

<body>
    <html>
      <head>
      <style type="text/css">
          * {
            box-sizing: border-box;
          }
          .flex {
            display: flex;
          }
          .photo1 {
            width: 840px;
            height: 100px;
          }
          .photo2,
          .photo3 {
            width: 420px;
            height: 650px;
          }
          .photo3 {
          }

          .photo1,
          .photo2,
          .photo3 {
            border: 5px solid #ccc;
          }
          .photo1:hover,
          .photo2:hover,
          .photo3:hover {
            border-color: rgb(233, 99, 121);
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
      </style>
      </head>

      <body>
      <div class="photo1">
          <a target="_blank" href="../1/1.html"
            ><img
            src="https://img0.baidu.com/it/u=2852972384,536914861&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
            onmouseover='this.src="https://img1.baidu.com/it/u=3046933795,1481568088&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"'
            onmouseout='this.src="https://img0.baidu.com/it/u=2852972384,536914861&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"'
          /></a>
      </div>
      <div class="flex">
          <div class="photo2">
            <a target="_blank" href="../2/2.html"
            ><img
                src="https://img2.baidu.com/it/u=3552294757,3243191882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
                onmouseover='this.src="https://img1.baidu.com/it/u=3832935010,529609358&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=730"'
                onmouseout='this.src="https://img2.baidu.com/it/u=3552294757,3243191882&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"'
            /></a>
          </div>
          <div class="photo3">
            <a target="_blank" href="../3/3.html"
            ><img
                src="https://img0.baidu.com/it/u=3312603872,2552024421&fm=253&fmt=auto&app=120&f=JPEG?w=972&h=547"
                onmouseover='this.src="https://img1.baidu.com/it/u=3213028832,2848109658&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"'
                onmouseout='this.src="https://img0.baidu.com/it/u=3312603872,2552024421&fm=253&fmt=auto&app=120&f=JPEG?w=972&h=547"'
            /></a>
          </div>
      </div>
      </body>
    </html>
</body>
</html>

黄小明同学 发表于 2024-8-21 14:37

不知道是不是你要的效果？随手按你的写了下

黄小明同学 发表于 2024-8-21 14:43

你换行的原因是因为你的父级840，但你子元素li加起来超过了840，因为你图片设置了大小没考虑边框

庸世俗人罢勒 发表于 2024-8-21 15:01


因你的xttblog 总宽为840，但边框为5，则按photo1所示总宽为840px + 5px(左边) + 5px(右边) = 850px
Photo2和3分别宽设定为420，则第二行内容实际宽为 430px(2图)+430(3图) -5(重合部分) = 855px，已经超出实际xttblog设定的总宽，所以会掉落；

调整方式：将photo1设置为832px；其左右边框共计8px；共计840px; (为方便计算，边框取偶数 4 )
计算photo2和3的宽，840px(总宽) - 12px(总边框为4条则为16px，减去你设定的重合边框 16-4 = 12px) ;故除去边框的实际两块内容共828px，828/2则为每个图的宽度414px
根据你的代码调整后如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<html>
<head>
<style type="text/css">
/** 重置浏览器默认标签样式 */
* {
margin: 0;
padding: 0;
}
body {
background-image: url(img/background.jpg);
background-size: cover;
}
.xttblog {
width: 840px; /** 大框宽 */
height: 750px; /** 大框高 */
margin-top: 30px; /** 顶距 */
margin-left: auto;
margin-right: auto;
color: black;
}
.box {
list-style-type: none;
}
.box:after {
content: ".";
display: block;
line-height: 0;
width: 0;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
.box li {
float: left;
}
.box li a, .box li a:visited {
display: block;
border: 4px solid #ccc; /** 框线厚度 */
margin-left: -4px; /** 框线重叠 */
margin-top: -5px;/** 框线重叠*/

z-index: 1;

}
.box li a:hover {
border-color: rgb(233, 99, 121);
z-index: 2;
}
</style>
</head>
<body>
<div class="xttblog">
<ul class="box">
<li><a class="photo1" target="_blank" href="../1/1.html"><img src="img/1.jpg" onmouseover='this.src="img/1-after.jpg"' onmouseout='this.src="img/1.jpg"' width="832px" height="100px" /></a></li>
<li><a class="photo2" target="_blank" href="../2/2.html"><img src="img/2.jpg" onmouseover='this.src="img/2-after.jpg"' onmouseout='this.src="img/spring.jpg"' width="414px" height="650px" /></a></li>
<li><a class="photo3" target="_blank" href="../3/3.html"><img src="img/3.jpg" onmouseover='this.src="img/3-after.jpg"' onmouseout='this.src="img/summer.jpg"' width="414px" height="650px"/></a></li>
</ul>
    </div>
</body>
</html>

爱飞的猫 发表于 2024-8-22 05:22

不考虑 IE 兼容性的话，更推荐使用 display: grid 方式来调整布局。
页: [1]
查看完整版本: html练习，图片显示问题请教


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn