html - html 在 2 列布局中居中和调整图像大小

问题描述

我正在尝试制作一个 2 列布局，在左列中简要描述两个人，在右列中显示他们的图片。我正在努力获得合适的图片大小，并且无法弄清楚如何将它们放在列中。我提供了下面的代码以及一个链接。任何建议表示赞赏。谢谢！

（https://nathanscottcreations.github.io/）

相关HTML：

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="VCGstyle.css">
    <style>
    html, body  {
                height: 100%;
                max-width:100%;
                margin: auto;
                }

    section     {
                max-width:80%;
                margin-left:auto;
                margin-right:auto;
                }
    .row        {
                display:flex;
                }

    .column     {
                flex: 50%;
                padding-left:3%;
                padding-right: 3%;
                }

    .columnpic  {
                flex: 50%;
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 50%;
                }
    <div style="height:500px;background-color:white;padding-top:1%;padding-bottom:1%;">
       <section style="max-width:80%;height:100%;margin-left:auto;margin-right:auto;background- 
        color:#F8F8F8;">
           <p style="font-size:50px;">About Us</p>
        <br><br>
    <div class="row">
      <div class="column">
        <h2>Evan Walker</h2>
            President & Chief Executive Officer, Baldiwn Wallace University '20
            <br><br><br><br><br><br><br>
      </div>
         <div class="columnpic" style="background-image: url(EvanHeadShot.jpg);background-repeat: no- 
         repeat;text-align:center;">
         </div>
    </div>

   <div class="row">
      <div class="column">
        <h2>Nathan Scott</h2>
            Executive Director, Baldwin Wallace Universtiy '20
            <br><br><br><br><br><br><br>
       </div>
         <div class="columnpic" style="background-image: url(linked2.jpg);background-repeat: no- 
         repeat;text-align:center;">
         </div>
     </div>
     </section>
    </div>

标签： htmlcss

解决方案

这里的主要问题是您使用background-image而不是img属性显示图像。有关如何使用它们的指南，请参见此处。

我用您的代码做了一个片段并对其进行了一些清理。我删除了所有的内联样式和无用的规则，使其更简单、更清晰。background如果您想查看不同元素的边界，请取消注释属性。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  background: white;
}

section {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  /* background: lightgreen; */
}

.about-title{
  font-size: 50px;
  margin-bottom: 2rem;
}

.row {
  display: flex;
  padding: 1rem;
  /* background: lightcoral; */
}

.column {
  width: 50%;
  padding-left: 3%;
  padding-right: 3%;
  /* background: lemonchiffon; */
}

.columnpic { 
  width: 50%;
  text-align: center;
  /* background: lightblue; */
}

.pic { 
  width: 100%;
  max-width: 200px;
}

<div>
  <section>
    <h1 class="about-title">About Us</h1>
    <div class="row">
      <div class="column">
        <h2>Evan Walker</h2>
        President & Chief Executive Officer, Baldiwn Wallace University '20
      </div>
      <div class="columnpic">
        <img class="pic" alt="Profile picture" src="https://nathanscottcreations.github.io/linked2.jpg" />
      </div>
    </div>

    <div class="row">
      <div class="column">
        <h2>Nathan Scott</h2>
        Executive Director, Baldwin Wallace Universtiy '20
      </div>
      <div class="columnpic">
        <img class="pic" alt="Profile picture" src="https://nathanscottcreations.github.io/linked2.jpg" />
      </div>
    </div>
  </section>
</div>

html - html 在 2 列布局中居中和调整图像大小

问题描述

解决方案

推荐阅读