子图像的父 div 复制尺寸答案

【问题标题】：Parent div copy dimensions of child image子图像的父 div 复制尺寸
【发布时间】：2017-03-21 19:25:16
【问题描述】：

我需要设置我的父 div 的方式，它的子图像将在其中，因为父 div 有可见的边框，它必须环绕图像和文本。感谢您的任何提示:)

HTML：

.about-us {
  border: 1.5px solid $grey;
  width: 100%;
  height: 275px; //I need to get rid of this as now it's fixed
  .us-image {
    float: left;
    width: 30%;
    img {
      width: 100%;
      height: auto;
      padding: .7%;
    }
  }
  .about-us-text {
    float: left;
    width: 64%;
    margin: 0 3%;
    h3 {
      margin-top: 5%!important;
      text-transform: uppercase;
      font-size: 130%;
      font-weight: 500;
    }
  }
}

<section class="about-us">
  <div class="us-image">
    <img src="img/about-us.png" alt="about-us">
  </div>
  <div class="about-us-text">
    <h3>Abc</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit
      sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blandit lacus.
    </p>
  </div>
</section>
<!-- /about-us-->

【问题讨论】：

标签： html css image position

【解决方案1】：

只需将 display: inline-flex; 添加到您的 about-us 类中，无需更改 scss 中的任何其他内容。我刚刚将您的 scss 编译为 css。

.about-us {
  display: inline-flex;
  border: 1.5px solid #000000; 
  width: 100%;
  height: 265px;
}
.about-us .us-image {
  float: left;
  width: 30%;
  display: inherit;
}
.about-us .us-image img {
  width: 100%;
  height: auto;
  padding: .7%;
}

.about-us-text {
  float: left;
  width: 64%;
  margin: 0 3%;
}
.about-us-text h3 {
  margin-top: 5%!important;
  text-transform: uppercase;
  font-size: 130%;
  font-weight: 500;
}

<section class="about-us">
  <div class="us-image">
    <img src="http://freebigpictures.com/wp-content/uploads/2009/09/forest-land.jpg" alt="about-us">
  </div>
  <div class="about-us-text">
    <h3>Abc</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blandit lacus. 
    </p>
  </div>
</section><!-- /about-us-->

【讨论】：

【解决方案2】：

设置 div 的高度和宽度，并将 max-width, max height size 设置为 100%。它将根据 div 的高度和宽度自动调整。

.us-image{
    height: 75px;
        width: 75px;
    }
    img {
        max-width: 100%;
        max-height: 100%;
    }

【讨论】：

【解决方案3】：

将您的图像浮动到左侧，并将 overflow:hidden 属性添加到您的父 DIV，同时删除您的 DIV 的固定高度。

【讨论】：

【解决方案4】：

从.about-usdiv 中删除高度并使用clear:both 和.about-us::after 清除浮动

html:

<section class="about-us">
        <div class="us-image">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/af/99/5d/af995d61b255bfd53bbdbfa343451949.jpg" alt="about-us">
        </div>
        <div class="about-us-text">
            <h3>Abc</h3>
            <p>Lorem ipsum dolor sit ame, consectetur adipiscing elit. Donec pharetra mauris ornare ultricies malesuada. Donec pretium, dolor a dapibus tempor, nisl enim lacinia risus, eget ullamcorper diam velit id tortor. Nulla velit purus, euismod a suscipit sed, gravida et ligula. Quisque scelerisque sodales faucibus. Vestibulum ullamcorper eget dui id laoreet. Nullam pellentesque neque sagittis, ullamcorper sem sed, vehicula ex. Nullam lobortis et nibh eget cursus. Aenean vitae blanditd lacus. 
            </p>
        </div>
    </section><!-- /about-us-->

css:

 .about-us {
border: 1.5px solid black; 
width: 100%;
 //I need to get rid of this as now it's fixed

.us-image {
    float: left;
    width: 30%;
        img {
            width: 100%;
            height: auto;
            padding: .7%;
         }
 }

.about-us-text {
    float: left;
    width: 64%;
    margin: 0 3%;

    h3 {
        margin-top: 5%!important;
        text-transform: uppercase;
        font-size: 130%;
        font-weight: 500;
    }

}
}

.about-us::after{
  content: "";
  display:table;
  clear:both;
}

【讨论】：

【解决方案5】：

.us-image img{
width:100%;}

将此添加到 css

【讨论】：