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 - 圖像溢出

回答

相關問題