如何使h2元素不超过图像宽度答案

【问题标题】：How to make the h2 element not exceed image width如何使h2元素不超过图像宽度
【发布时间】：2018-12-22 22:53:51
【问题描述】：

我正在尝试使我的 h2 元素文本超过同级元素（图像）的宽度。

.container {
  display: flex;
}

img {
  height: 25%;
}

<div class="container">
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
  <div class="single-container">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
  </div>
</div>

codepen 链接 https://codepen.io/anon/pen/LBGGWB?editors=1100

【问题讨论】：

标签： css responsive-design

【解决方案1】：

您需要在单容器类中添加一些 css。

.single-container {
  width:270px
}

将宽度更改为您想要的任何内容:)

编辑：Codepen 链接 - https://codepen.io/canadianeagle/pen/YjwwYg

【讨论】：

【解决方案2】：

.container {
  display: flex;
}

img {
  width: 213px;
  height: 25%;
}

.single-container {
  width: 33.33%;
}

.innerDiv {
  width: 50%;
}

<div class="container">
  
  <div class="single-container">
    <div class="innerDiv">
    <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
    <h2>I'm trying to not make this more than image width.</h2>
    </div>

  </div>
    <div class="single-container">
              <div class="innerDiv">
            <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
            <h2>I'm trying to not make this more than image <width class=""></width></h2>
          </div>
      </div>
  
    <div class="single-container">
            <div class="innerDiv">
          <img src="https://imagesvc.timeincapp.com/v3/mm/image?url=https%3A%2F%2Ftimedotcom.files.wordpress.com%2F2014%2F11%2F84146440.jpg&w=800&q=85" alt="">
          <h2>I'm trying to not make this more than image width.</h2>
        </div>
  </div>
</div>

Check out my solution on codepen

【讨论】：