Parent div 复制子图像的尺寸

Question

我需要设置我的父级 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-->

Answer 1

刚刚将 display: inline-flex; 添加到您的 about-us class，无需更改您的 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-->

Answer 2

设置 div 的高度和宽度，并将最大宽度、最大高度大小设置为 100%。它将根据 div 的高度和宽度自动调整。

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

Answer 3

将您的图片向左浮动，并将 overflow:hidden 属性添加到您的父级 DIV，同时移除您的 DIV.[=11] 的固定高度=]

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

Answer 5

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

将此添加到 css

Parent div 复制子图像的尺寸

Parent div copy dimensions of child image

html

css

position

image