---------

Question

对于一个学校项目，我正在尝试重新创建它：

第一张图片是501x850，第二张图片是1050x425。

HTML

  <section class="clearfix">
    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </section>

CSS

.button {
  background-color: #16D6D1;
  padding: .9rem 2rem;
  border-radius: 6px;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
  size: 1.9rem;
  font-weight: 700;
}

.eurovan {
  width: 35%;
}

.boat {
  width: 65%;
  float: right;
}

.feature {
  width: 65%;
  background-color: #F6F8FA;
  float: right;
}

我需要重新创建的设计具有boat和eurovan类的图片，前者是高度的一半。当我制作eurovan的图片width: 65%和boat的{{1}}时，它会改变高度，而width: 35%却不是{{1}的高度的一半}就像原来一样。

Answer 1

除非您按比例缩放两个图像的宽度，否则它们的高度也不会按比例缩放。但是，您可以计算适当的百分比：

两个原始图像的总宽度为：

501px + 1050px = 1551px

要在图像之间添加3％的间隙，请计算总宽度的3％：

1551px * 3％= 46.53px

将该值添加到总宽度中：

1551px + 46.53px = 1597.53px

计算每个图像在总宽度中所占的百分比：

501px / 1597.53px =〜 31.36 ％
1050px / 1597.53px =〜 65.73 ％

如果使用这些百分比，图像将彼此成比例缩放。

body {
  margin: 0;
}

.eurovan {
  width: 31.36%;
  float: left;
}

.boat {
  width: 65.73%;
  float: right;
}

.feature {
  width: 65.73%;
  background-color: #F6F8FA;
  float: right;
  padding: 1.5em;
  /* margin: 3% 0 0; */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  text-align: center;
}

.feature h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
}

.feature h2 {
  font-size: 1.3em;
  margin: 0 0 1.2em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}

<section class="clearfix">
  <img class="eurovan" src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  <img class="boat" src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
  <div class="feature">
    <h3>Feature</h3>
    <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
    <a href="#" class="button">Read More</a>
  </div>
</section>

您的模型在第二个图像和Feature元素之间不包含任何空格。但是，如果需要，可以向要素元素添加3％margin-top，以实现与图像之间的间距相同大小的垂直间距。这是基于以下事实：保证金百分比是根据the width of the containing block计算得出的。

同一策略可以用于其他布局，例如flexbox或grid。这样可以使特征的底部与第一张图像的底部对齐（取决于特征内容的数量）更加容易。

这是一个示范：

body {
  margin: 0;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#col1 {
  flex: 0 0 31.36%;
}

#col2 {
  flex: 0 0 65.73%;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  width: 100%;
}

.feature {
  flex: 1 0 auto;
  background-color: #F6F8FA;
  padding: 1.5em;
  /*margin-top: 4.56%;*/
  /* this is (3% / 65.73%) */
  box-sizing: border-box;
  font-size: 10px;
  font-family: sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  text-align:center;
}

.feature h3 {
  margin: 0;
  font-size: 1.2em;
}

.feature h2 {
  margin:0;
  font-size: 1.3em;
}

.button {
  background-color: #16D6D1;
  padding: 0.9em 2em;
  border-radius: .5em;
  display: inline-block;
  font-weight:bold;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  color: inherit;
}

<section>
  <div id="col1">
    <img src="https://picsum.photos/id/236/501/850" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
  </div>
  <div id="col2">
    <img src="https://picsum.photos/id/238/1050/425" alt="An overhead shot of a boat coming into shore from the ocean">
    <div class="feature">
      <h3>Feature</h3>
      <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt.</h2>
      <a href="#" class="button">Read More</a>
    </div>
  </div>
</section>

Answer 2

我建议使用父级div将要影响的两个元素包装在案例图像中。

<div class="parent_div">
<img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
<img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
</div>

现在您应该使用flexbox或CSS网格系统，因为建议使用它代替浮点数。在这种情况下，我建议使用网格。

.parent_div{
 display: grid;
 grid-template-columns: 1fr 1fr;
}

您可以查看网格文档以查看您拥有的其他选项。

Answer 3

使用此代码，您可以找到所需的内容，我制作了一个功能容器，并使用背景图像而非imgs进行了更多的CSS控制

<section class="clearfix">
    <div class="eurovan"></div>
    <div class="feature-container">
        <div class="boat"></div>
        <div class="feature">
            <h3>Feature</h3>
            <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamon nonummy nibh euismod tincidunt ut laoreet dolore magna.</h2>
            <a href="#" class="button">Read More</a>
        </div>
    </div>
</section>

还有这个CSS

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.button {
    background-color: #16D6D1;
    padding: .9rem 2rem;
    border-radius: 6px;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: inherit;
    size: 1.9rem;
    font-weight: 700;
}

.eurovan {
    width: 33%;
    margin-right: 2%;
    height: 850px;
    float: left;
    background-image: url('../images/eurovan.jpg');
    background-size: cover;
    display: block;
}

.feature-container {
    width: 65%;
    float: left;
    height: 850px;
}

.boat {
    width: 100%;
    height: 50%;
    background-image: url('../images/boat.jpg');
    background-size: cover;
    display: block;
}

.feature {
    width: 100%;
    height: 50%;
    text-align: center;
    background-color: lightgrey;
}

Answer 4

---------

编辑：我认为我的答案还可以，但是这个https://stackoverflow.com/a/56487541/10712525（@ showdev答案）是完美的。

---------

Look the result

我添加了一个新的“ main”元素来居中居中，并用div分隔了左右内容。我更改了样式中的某些内容，添加了新行，并删除了其他内容，所有内容均已注释。希望它能对您有所帮助。

以下代码：

<html>
    <head>
        <style>
            .button {
                background-color: #16D6D1;
                padding: .9rem 2rem;
                border-radius: 6px;
                display: inline-block; /* New line */
            }

            a {
                text-decoration: none;
                text-transform: uppercase;
                color: inherit;
                size: 1.9rem;
                font-weight: 700;
            }

            .eurovan {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 35% */
            }

            .boat {
                width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 65% */
                /* delete float: right, dont need it*/
            }

            .feature {
                width: 65%;
                /* delete background-color: #F6F8FA, dont need it */
                /* delete float: right, dont need it */

                text-align: center; /* New line */
                margin: auto; /* New line */
                padding: 50px; /* New line */
            }

            /* add content to this class */
            .left {
                display: inline-block;
                position: absolute;
                width: 65%;
                margin: 20px;
            }

            /* add content to this class */
            .right {
                display: inline-block;
                width: 35%;
                margin: 20px;
            }

            /* add content to this class */
            .clearfix {
                position: relative;
            }

            /* New class, only for center the content in the middle */
            .main {
                max-width: 70%; 
                margin: 0 auto;
            }
        </style>
    </head>
    <body>

        <!-- New main div -->
        <main class="main">

            <section class="clearfix">

                <!-- separate right left content in divs -->
                <div class="right">
                    <img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
                </div>
                <div class="left">
                    <img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
                    <div class="feature">
                        <h3>Feature</h3>
                        <h2>lorem ipsum dolor sit amet, consectetur</h2>
                        <a href="#" class="button">Read More</a>
                    </div>
                </div>

            </section>
        </main>
    </body>
</html>

要考虑：

我在feature，left和right类中添加的padding / margin属性只是为了使元素之间保持更远的距离。不一定要达到您的目的，但是样式化的想法是使所有内容都变得美丽，并使项目彼此分开，使一切看起来更好。与main div相同，您可以根据需要将其删除，也可以将宽度从70％更改为80％或50％。

如何在不更改其高度和宽度的情况下并排浮动两个图像？

4 个答案:

---------

---------