Flexbox - 图像溢出

我试图创建一个flex容器，其中有2个项目 - 文本div和图像div。Flexbox - 图像溢出

但是，我有真正的问题保持在容器本身的形象。当我调整浏览器的宽度时，图片只是从容器中溢出，我似乎无法理解它为什么会发生。这些物品当然应该留在他们的容器内？

代码是在这里：

<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是在这里：

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

我做了一些环顾四周，尝试了几种解决方案：使用Flex-基础上，柔性成长等似乎没有工作。

有没有一种方法可以让我的这两个div响应，同时让他们的里面的他们的柔性容器？

或者如果我按照我设置的方式做错了事，有人可以让我知道吗？

感谢，

Reskk

来源

2016-10-12 Reskk

据我所知，这是一个形象问题，而不是一个Flexbox的问题。尝试为图片添加静态宽度。 –

只需将max-width: 100%;和height: auto;添加到<img>以使其响应。

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>

来源

2016-10-12 18:35:04 5aledmaged

完美的作品。非常感谢你！ – Reskk

添加flex: 1;到.blog文本和.blog-IMG

.blog-text { 
/* width: 80%;*/ 
    margin: 0 30px; 
    flex: 1; 
} 

.blog-img { 
    flex: 1; 
}

这将使图像留在容器内。

来源

2016-10-12 18:15:53 Aakash

嗯只是试图 - 图像仍然溢出在较小的浏览器宽度 – Reskk

Flexbox - 图像溢出

回答

相关问题