Question

此着陆页的最终目标是并排放置两个图像，两个图像的高度均为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;
}

这已经达到了高度和宽度的目标，但是到目前为止，我的修修补补还没有使图像按比例进行调整并把溢出量收起来。

我一直在搜索，直到现在都找不到解决该问题的方法，如果我在某处错过了一篇非常明显的文章，我们深表歉意。任何帮助表示赞赏！

Answer 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>

Answer 2

尝试添加

.page { overflow: hidden; }

您的代码。希望这可以确保隐藏所有溢出的内容。

Answer 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>

Answer 4

使用flex并将其子元素的宽度设置为50％。删除正文的默认边距。要消除图像导致的空白，请在font-size:0 div上添加.page。显然，稍后当该页面的该部分中有文本时，可以改用该字体大小。

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>

Answer 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;
}

两个图像，并排响应

5 个答案: