使包装内容响应的图像

Posted 2021-05-02

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

如何在调整浏览器大小的同时创建此结构而不会出现问题，假设它占用了部分宽度的20％？

html：

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

CSS：

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

这个代码在将浏览器调整到较低宽度之前正确地对齐项目，但在响应性方面看起来非常冗长且效率不高，如我所见。

答案

试试吧。根据参考图像，图像和内容部分的列高相等。我希望这个解决方案会有所帮助。

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

.wrapper {
    display: flex;
}
.hero_details {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 0 10px;
}
.hero_details_inner {
    width: 100%;
    align-items: flex-start;
}
.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;
}

<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">
            <div class="hero_details_inner">
                <h2>John Doe</h2>
                <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>

另一答案

替代解决方案：

.container .img {
  text-align: center;
}

.container .details {
  border-left: 3px solid #ded4da;
}

.container .details p {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  word-break: keep-all;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4 img">
      <img src="http://placehold.it/150x200/CCCCCC&text=Image" alt="" class="img-rounded"> </div>
    <div class="col-sm-6 col-md-4 details">
      <blockquote>
        <h5>John Doe</h5>
        <small>professor</small>
      </blockquote>
      <p>Senior Group Leader and professor of surgical Oncology University Of Oxford</p>
      <div>
        <button type="button" class="btn btn-outline-secondary">Follow</button>
        <button type="button" class="btn">Message</button>
      </div>
    </div>
  </div>
</div>

另一答案

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

HTML：

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

CSS：

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

以上是关于使包装内容响应的图像的主要内容，如果未能解决你的问题，请参考以下文章

php 一个自定义的try..catch包装器代码片段，用于执行模型函数，使其成为一个单行函数调用

使多个运动图像响应点击

缩放背景图像以包装布局内容

如何使背景图像和表格响应？

如何使堆栈视图或容器视图包装内容？

将 div 与图像的右边缘对齐