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>

Answer 2

＆＃13;

＆＃13;

.header {
	background-color: #333333;
  line-height:1.5em;
  display:inline;
}
.container{
 float:right;  
  width:70%;
  padding-left:10%;
}
.logo-wrapper {
	float:left;
    width:20%;   
}
.logo-wrapper img{
    max-width:100%
}
}
.logo {
    position: relative;
    /* padding-top: 50%; */
    height: 100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为@Mitul的答案是正确的。但Mitul的解决方案略有改动。如果您不想在图像下方显示任何文字，则应将其修改为。