Question

问题：img {Overflow：hidden;}无法按预期工作。

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<style>
.container-fluid { 
  background-color: #092876;
  color: white;
  overflow:hidden;    <!-- change visible to hidden to see effect -->
  margin: 1% 5% 1% 5%;
  max-width: 100%;
}

</style>


<html>
<div class="container-fluid"> <!-- container-fluid-->

<div class="about-me" id="about-me">  <!-- ABOUT ME SECTION-->
  <h1 class=about-me_h1>Lee Yang </h1>
  <img src="http://res.cloudinary.com/dsy2w1n70/image/upload/c_scale,h_461,w_450/v1492552203/p3_2_d3xydb.jpg" alt="Profile Picture"
       align=left>
  <p class=about-me_p1>If i remove hidden the picture renders outside of the element.  But if i use hidden, the element expands to capture the picture</p>



</div> <!--END of ABOUT ME SECTION-->
</html>

元素和图像在容器流体中。如果我删除溢出（默认设置然后设置为可见），图像将呈现在元素框之外;正如所料。但是一旦我添加了overflow：hidden，元素就会扩展以覆盖整个图像。这就是我想要的，但我偶然发现了这一点，完全期待溢出：隐藏隐藏图像的后半部分。

溢出的图像：隐藏在容器流体中 - 不隐藏图像

0 个答案: