html центрирование и определение размера изображения в 2 колонках - PullRequest
Новая
       7

html центрирование и определение размера изображения в 2 колонках

2 голосов
/ 25 апреля 2020

Я пытаюсь сделать макет из 2 столбцов с кратким описанием двух людей в левом столбце и изображением их в правом столбце. Я изо всех сил пытаюсь получить хорошее представление о размерах картинок и не могу понять, как их центрировать в колонке. Я предоставил код ниже, а также ссылку. Любые предложения приветствуются. Спасибо!

(https://nathanscottcreations.github.io/)

Соответствующий CSS: 

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

Соответствующий 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>

Ответы [ 2 ]

3 голосов
/ 25 апреля 2020

Основная проблема заключается в том, что при отображении изображений используется 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>
0 голосов
/ 25 апреля 2020

Попробуйте использовать CSS сетку для двухмерных макетов. Вы пытаетесь центрировать изображение в flex, которое действительно построено для одномерных макетов.

В сетке CSS создание столбцов так же просто, как {grid-template-column, align-items и justify-items}.

Не уверен, сколько вы знаете о CSS Вы знаете, но основы действительно просты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...