Flexbox-图片溢出 [英] Flexbox - Image overflowing

问题描述

我正在尝试创建一个其中包含2个项目的flex容器-文本div和图像div.

I'm trying to create a flex container that has 2 items in it - a text div and an image div.

但是，在将图像保存在容器本身中时，我遇到了真正的问题.当我将浏览器调整为较小的宽度时，图像只会从容器中溢出，而我似乎无法理解为什么会发生这种情况.这些物品肯定应该留在容器中吗?

However I'm having real problems keeping the image within the container itself. When I resize the browser to a small width the image just overflows out of the container and I can't seem to understand why it is happening. Surely the items should stay within their container?

代码在这里:

<div class="featured-blog">
  <div class="featured-blog-main">
<h2>Featured Blog</h2>

  <div class="blog-flex">

 <div class="blog-text">
   <h3>Easter Island</h3>
   <p>Turpis sed tempus integer erat, pellentesque tortor nisl, eros viverra, integer vehicula taciti sapien sed nisl dui, nec litora tincidunt cum non lobortis sollicitudin. Et odio duis cum magna pretium. Enim augue odio. Non nec velit sed lacus in. Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p></div> 

    <div class="blog-img"> <img src="http://www-tc.pbs.org/wgbh/nova/assets/img/fate-of-easter-island/image-01-large.jpg"></div>

  </div> <!-- blog-flex-->
    </div> <!-- featured-blog-main -->
  </div>   <!--featured-blog -->



.featured-blog {
 margin: 0 60px;
 padding: 100px 0;
 border-top: 2px solid gainsboro; }

.blog-flex {
 display: flex;  }

.blog-text {
margin: 0 30px; }

codepen在这里:

The codepen is here:

http://codepen.io/reskk/pen/ALdpbz

我已经环顾四周，并尝试了一些解决方案:使用flex-basis，flex-grow等，但似乎都无效.

I've done some looking around and tried a few solutions: using flex-basis, flex-grow etc. and none seem to work.

我是否有办法使这两个div保持响应，同时又将它们保持在它们的flex容器内?

Is there a way for me to make these two divs responsive whilst keeping them inside their flex container?

或者如果我在设置方式上做错了事，有人可以让我知道吗?

Or if I'm doing something wrong in the way I've set it up can someone please let me know?

谢谢

Reskk

推荐答案

只需将 max-width:100％; 和 height:auto; 添加到您的< img> 使其具有响应性.

Just add max-width: 100%; and height: auto; to your <img> to make it responsive.

h2 {
  text-align: center;
}
h3 {
  margin: 0 0 30px;
  font-size: 1.8em;
}
.featured-blog {
  margin: 0 60px;
  padding: 100px 0;
  border-top: 2px solid gainsboro;
}
.featured-blog-main {
  background: rgba(0, 0, 0, 0.3);
}
.blog-flex {
  display: flex;
}
.featured-blog p {} .blog-text {
  /*  width: 80%;*/
  margin: 0 30px;
  flex: 1;
}
.blog-img img {
  max-width: 100%;
  height: auto;
}

<div class="featured-blog">
  <div class="featured-blog-main">
    <h2>Featured Blog</h2>
    <div class="blog-flex">
      <div class="blog-text">
        <h3>Easter Island</h3>
        <p>Turpis sed tempus integer erat, pellentesque tortor nisl, eros viverra, integer vehicula taciti sapien sed nisl dui, nec litora tincidunt cum non lobortis sollicitudin. Et odio duis cum magna pretium. Enim augue odio. Non nec velit sed lacus in.
          Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p>
      </div>
      <div class="blog-img">
        <img src="http://www-tc.pbs.org/wgbh/nova/assets/img/fate-of-easter-island/image-01-large.jpg">
      </div>
    </div>
  </div>
</div>

这篇关于Flexbox-图片溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！