Question

我想让所有图像正确对齐，如果有人可以帮助它将非常感谢所有图像都是100％相同的大小所以它不是那个问题

＆＃13;

            .box {
         float: left;
         width: 20%;
         padding-bottom: 20%;
      }

      .top-left {
        position:absolute;
        top: 10px; left: 10px;
        width: 50%;
        overflow: hidden;
      }

      .top-right {
        position:absolute;
        top: 10px; right: 10px;
        width: 50%;
        overflow: hidden;
      }
      .bottom-left {
        position:absolute;
        bottom: 10px; left: 10px;
        width: 50%;
        overflow: hidden;
      }
      .bottom-right {
        position:absolute;
        bottom: 10px; right: 10px;
        width: 50%;
      }

          @media only screen and (max-width : 480px) {
         .box {
            width: 100%;
         }
         .box a{
            position: relative;
         }

         .top-left, .top-right, .bottom-left, .bottom-right {
            width:100%;
         }

      }

＆＃13;

<!Doctype html>
<html>
  <head>
    <title>DelUZens</title>
    <link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
    <link href="main.css" rel="stlesheet" type="text/css">
    <style>
    .wrap {
      overflow:hidden;
    }

  
    </style>
  </head>
  <body bgcolor="black">
    <div class="section-links">
    <div class="wrap">
    <div class="box">

      <a href="teams.html" class="top-left">
        <img style="width: 100%;" style="height: 100%" src="icon1.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="store.html" class="top-right">
        <img style="width: 100%;" style="height: 100%"  src="icon2.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="sponsors.html" class="bottom-left">
        <img style="width: 100%;" style="height: 100%" src="icon4.jpg" alt="">
      </a>
      </div>

      <div class="box">
      <a href="aboutus.html" class="bottom-right">
        <img style="width: 100%;" style="height: 100%" src="icon3.jpg" alt="">
      </a>
      </div>
    </div>
    </div>
  </body>
</html>

＆＃13;

所以，如果你能看到顶部的尖端并没有完全触及与双方相同的另一端

亲切的问候 CreepyC 非常感谢

Answer 1

您要将<a>元素的高度和宽度设置为50%，但是您要从每个边缘定位10px，这意味着它们会重叠。

您可以使用CSS calc()将图片尺寸调整为10个像素，小于50％以补偿：

width: calc(50% - 10px);

（注意空格很重要，不要遗漏）。

calc()相对较新，如果有疑虑，请查看http://caniuse.com/#feat=calc以获取浏览器支持。

Answer 2

我认为最好的方法是使用带行的bootstrap网格系统 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
如果每行中有两张图片，则在每个图片中放置一个col-6类（它们的列必须添加到12），并且它还具有其他类名的响应性。

或使用带有flex的CSS http://www.w3schools.com/cssref/css3_pr_flex.asp
这里还有一个有趣的页面，可以更好地理解flex及其功能 http://flexboxfroggy.com/

Answer 3

如果你想要所有图像100％高度和宽度的屏幕然后使用100vh。例如： -

    .class{ height:100vh; width:100%; margin:0; padding:0; }

如果您想在您的网站上使用px /％修复高度/宽度（根据您的要求）无淀粉图像.. 例如： -

    .class{ height:200px; width:auto; margin:0; padding:0; }

我固定高度，如果你想要固定宽度，也一样。

CSS - HTML - 如何在页面中正确对齐图像

3 个答案: