Css 使包装内容的图像具有响应性

我需要创建一个旁边有一些信息的图像，信息就像一个名字，大学和一个跟随按钮，就像这个演示一样

如何创建此结构而不在调整浏览器大小时出现问题，假设它占截面宽度的20%

html:

在将浏览器调整为较低宽度之前，此代码会正确对齐项目

---

但就我所看到的响应而言，似乎非常冗长且效率低下。

另一种解决方案：

.container.img{
文本对齐：居中；
}
.集装箱.详细信息{
左边框：3px实心#ded4da；
}
.集装箱详情{
字体大小：15px；
字体大小：粗体；
文本对齐：左对齐；
断字：保留一切；
}

无名氏
教授
牛津大学肿瘤外科学高级组长、教授
跟随
消息

试试这个。图像和内容部分的列高将与参考图像相同。我希望这个解决方案会有所帮助

img{
最大宽度：100%；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
a{
文字装饰：无；
}
.包装纸{
显示器：flex；
}
.hero_详细信息{
显示器：flex；
柔性包装：包装；
填充：0 10px；
}
.hero\u详细信息\u内部{
宽度：100%；
调整项目：灵活启动；
}
.hero_详细信息。联系{
显示器：flex；
对齐项目：柔性端；
}
.wrapper.contact.btn流{
显示：内联块；
颜色：#000；
边框：1px实心#333；
填充物：3px4px；
边界半径：3px；
}
.wrapper.联系a{
利润率：0.6px 0.0；
}

无名氏
教授

高级组长兼外科肿瘤学教授

牛津大学

在我检查了@Shavran的解决方案之后，我对它进行了一些修改，以实现它的最大好处，这是最后的代码：

html:

---

很抱歉我无法添加评论。所以我的回答没有你的具体情况。我不会给你指定的源代码。您可以使用一些简单的CSS单元（如vm、vh）来实现这一点。它被称为响应（对于关键字）。有关详细信息，请访问此网站：我了解vm、vh和所有响应单位，问题是图像在响应方面总是有特殊情况，可以单独管理，但现在它绑定到一些信息，使其更难响应，这就是给我带来麻烦的原因，你可以添加你的code@Sharvan感谢我添加了它，它可以很好地与全浏览器宽度，但不是在调整大小后，如果我需要它为较小的宽度工作，我需要添加太多的断点，直到字体变得不可读！！谢谢，这没有什么帮助，因为我需要保持相同的结构每当浏览器得到调整大小，H2是对齐到图像的顶部，按钮与底部对齐，主要信息是在中间，你的标记似乎奇怪我，你用UL，我认为这不适合这里，谢谢你的尝试帮助！在我的浏览器工作良好。我不知道你到底想干什么。我跟随你的参考图片。对不起，我的朋友，如果我的问题对你来说不够清楚，但它应该是。。我想保持信息的一面与图像的一面相互调整大小，因此名称始终与图像的顶行对齐，按钮与图像的底行对齐，这应该在所有屏幕大小中保持，您的soln可以在小屏幕上显示，但在我的笔记本电脑上，则为全屏宽，按钮与图像的中线对齐，感谢您的耐心等待！

<section id="some-section">
            <div class="wrapper">
                <div id="img-container">
                    <img src="avatar.png" alt="herp_image">
                </div>
                <div id="hero_details">
                    <h2>John Doe</h2>
                    <span>Professor</span>
                    <span>Neuroscience</span>
                    <span>University of Oxford</span>
                    <div id="Contact">
                        <a href="#">Follow</a>
                        <a href="#">Message</a>
                    </div>

                </div>     
            </div>
        </section>

img {
    max-width: 100%;
    max-height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

#some-section {
    background: #eee;
    font-family: 'Open Sans', sans-serif;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 20%;
    padding: 10px;
    background: lightgreen;
    line-height: 1.5;
    font-size: 0.9em;
}

#img-container {
    width: 100px;
    height: 200px;
    max-width: 60%;
    max-height: 80%;
    margin-right: 5px;
}

#hero_details {
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: auto;
}

#hero_details span {
    font-size: 0.85em; 
}


#hero_details h2 {
    margin-bottom: 0.5em;
}

  <section id="some-section">
    <div class="wrapper">
      <div class="img-container">
        <img src="https://via.placeholder.com/200x300" alt="herp_image">
      </div>
      <div class="hero_details">  
        <h2>John Doe</h2>
        <div class="hero_details_inner">       
          <p>Professor</p>
          <p>Senior Group Leader and professor of surgical Oncology</p>
          <p>University of Oxford</p>
       </div>
       <div class="contact">
         <a class="btn-flow" href="#">Follow</a>
         <a href="#">Message</a>
       </div>
     </div>
   </div>
  </section>

img {
    max-width: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
a {
    text-decoration: none;
}

.wrapper {
    display: flex;
    font-size: calc(11px + 0.4vw);
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}

.hero_details_inner p{
    margin-bottom: 0.5em;
    line-height: 2;
}
.hero_details .contact {
    display: flex;
    align-items: flex-end;
}
.wrapper .contact .btn-flow {
    display: inline-block;
    color: #000;
    border: 1px solid #333;
    padding: 3px 4px;
    border-radius: 3px;
}
.wrapper .contact a {
    margin: 0 6px 0 0;
}