两张图片，并排响应答案

【问题标题】：Two images, side by side responsive两张图片，并排响应
【发布时间】：2018-06-25 10:45:14
【问题描述】：

这个着陆页的最终目标是让两张图片并排，高度为 100%，宽度为 50%，保持纵横比并隐藏溢出。

这看起来应该很简单，但无论我如何尝试，我都遇到了问题。

此时我有以下内容：

<head>
    <link rel="stylesheet" href="Stylesheets/default.css">
</head>

<body>
    <div class="page">

        <div class="img-wrapper">
            <a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
        </div>

        <div class="img-wrapper">
            <a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
        </div>

    </div>

</body>

.page {
width: 100%;
height: 100vh;
white-space: nowrap;

}

.img-wrapper {
position: relative;
}

img {
float: left;
width: 50%;
height: 100vh;
}

这实现了高度和宽度目标，但到目前为止我的修补还没有让图像按比例调整并收起溢出。

到目前为止，我已经四处搜索并没有找到任何解决此问题的方法，如果我在某处错过了一篇非常明显的文章，我深表歉意。任何帮助表示赞赏！

【问题讨论】：

尝试在css3中使用flex

标签： html css

【解决方案1】：

我只会让它们成为背景图像。这样你就不用担心溢出了。在这里，我将锚设置为 100% 的宽度和高度（其容器的宽度和高度，因此每个页面的 50%），这似乎是您想要的。 background-position 保持左右图像分别锚定在右上角和左上角，封面background-size 确保纵横比保持不变。请注意，如果您的图片高于宽度，则可能无法达到预期效果。

body {
  margin: 0;
}

.page {
  width: 100%;
  height: 100vh;
  font-size: 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
}

.img-wrapper {
   flex: 1 1 50%;
}

.img-wrapper a {
  display: block;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
}

.img-wrapper:first-child a {
  background-image: url(https://picsum.photos/300/200);
  background-position: top 0 left 100%;
  background-size: cover;
}

.img-wrapper:last-child a {
  background-image: url(https://picsum.photos/300/200);
  background-position: top 0 right 100%;
  background-size: cover;
}

<body>
  <div class="page">
    <div class="img-wrapper">
      <a href="pol.html"></a>
    </div>
    <div class="img-wrapper">
      <a href="biz.html"></a>
    </div>

  </div>

</body>

【讨论】：

【解决方案2】：

尝试添加

.page { overflow: hidden; }

到您的代码。这有望确保隐藏任何溢出的内容。

【讨论】：

【解决方案3】：

您已将width:50% 分配给图像而不是其父元素。

<head>
    <link rel="stylesheet" href="Stylesheets/default.css">
    <style>
        .page {
            width: 100%;
            height: 100vh;
            white-space: nowrap;
        }

        .img-wrapper {
            position: relative;
            float: left;
            width: 50%;
        }

        .img-wrapper a {
            display: block;
        }

        img {
            width: 100%;
            height: 100vh;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="page">

        <div class="img-wrapper">
            <a href="pol.html">
                <img src="Images/cal-engel-531490-unsplash.jpg">
            </a>
        </div>

        <div class="img-wrapper">
            <a href="biz.html">
                <img src="Images/rawpixel-660717-unsplash.jpg">
            </a>
        </div>
        <div class="clear"></div>
    </div>
</body>

【讨论】：

【解决方案4】：

使用flex 并为其子元素提供50% 的宽度。删除正文的默认边距。并删除由于图像引起的空白，在.page div 上添加font-size:0。当您在此页面上有该部分的文本时，您显然可以稍后覆盖此字体大小。

body {
  margin: 0;
}

.page {
  width: 100%;
  height: 100vh;
  font-size: 0;
  display: flex;
}

.img-wrapper {
  width: 50%;
}

img {
  width: 100%;
  height: 100%;
}

<body>
  <div class="page">
    <div class="img-wrapper">
      <a href="pol.html"><img src="https://picsum.photos/300/200"></a>
    </div>
    <div class="img-wrapper">
      <a href="biz.html"><img src="https://picsum.photos/300/200"></a>
    </div>

  </div>

</body>

【讨论】：

【解决方案5】：

这是我达到的解决方案。我遇到的主要问题是我分配了

width:50%

到 img 而不是容器。

这是按预期工作的最终（ish）代码块。感谢您的建议！

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" href="Stylesheets/default.css">
    </head>

    <body>
        <div class="page">

            <div class="img-wrapper-l">
                <a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
            </div>

            <div class="img-wrapper-r">
                <a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
            </div>

            <div class="clear"></div>

        </div>

    </body>

html, body {
    height: 100%;
    margin: 0;
}

#wrapper {
    min-height: 100%; 
}

.page {
    width: 100%;
    max-height: 100vh;
    white-space: nowrap;
    overflow: hidden;
}

.img-wrapper-l {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: absolute;
    float: left;
}

.img-wrapper-r {
    height: 100%;
    width: 50%;
    overflow: hidden;
    position: relative;
    float: right;
}

img {
    height: auto;
    width: auto;
    max-width: 1200px;
    max-height: 1200px;
}

【讨论】：