html - 将图像定位在 Bootstrap 容器的左侧

Question

我正在尝试构建一个简单的网页，我需要将图像放置在容器的左侧。理想情况下，我想确保在调整浏览器窗口大小时图像能很好地调整大小，但仍保持其独立于文本的位置。我想要实现的目标看起来像这样:

文本部分在 Bootstrap 容器 CSS 类中。不确定如何实现我需要的外观 - 尝试了一些事情，图像位于包装器内，绝对位置与容器 div 处于同一级别，但我似乎无法将图像置于包装器内(垂直)。

这是我目前所拥有的:

.header {
	background-color: #333333;
}

.logo-wrapper {
	position: absolute;
}

.logo {
    position: relative;
    /* padding-top: 50%; */
    height: 100%;
}

 <div class="header">
      <div class="logo-wrapper">
        <img src="assets/logo.png" class="logo">
      </div>
      <div class="container">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
        <h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
        <h2> Integer vitae tortor id elit pharetra dignissim</h2>
      </div>
    </div>
</div>

Answer 1

.logo-wrapper {
	    width: 20%;
    display: table-cell;
    vertical-align: middle;
    
}
.logo-wrapper img{
    max-width:100%
}

.container{
  width:80%;
  display: table-cell;
}

<div class="header">
      <div class="logo-wrapper">
        <img src="https://pixabay.com/static/uploads/photo/2015/03/04/22/35/head-659652_640.png" class="logo">
      </div>
      <div class="container">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
        <h3>Sed tristique augue turpis, ullamcorper convallis augue fermentum vel. Cras a tempus nulla. Vestibulum congue sollicitudin vulputate</h3>
        <h2> Integer vitae tortor id elit pharetra dignissim</h2>
      </div>
    </div>
</div>