Question

我正在为我的阿姨创建一个网站，一位移动治疗师。目前我的问题是，我无法阻止治疗部分下的图像重叠。有人能帮我吗？我调整了它们的大小，使它们的宽度为250％，高度为180％。我没想到，当我使用flex容器时，它会像这样重叠。这是正常的吗？

堆栈溢出不会让我在这里用太少的单词输入我的所有代码所以这里是CodePen上我的工作代码的链接：https://codepen.io/wmufunde/pen/yPLZgG

＆＃13;

 /* ================================= 
      Media Queries
    ==================================== */
    
    @media (min-width: 769px) {
        .main-header,
        .main-nav,
        .row {
            display: flex;
        }
        
        .main-header {
            flex-direction: column;
            align-items:center;
        }
        
       .banner {
            display: flex;
            align-items: flex-end;
            flex-direction:row;
            flex: 2;
           justify-content: space-between;
        }
        
        
        .col {
            flex: 1;
            flex-shrink: 0;
            
        }
    
    }
    
    @media (min-width: 1025px) {
        
        .main-header {
            flex-direction: row;
            justify-content: space-between;
        }
        
        .primary {
            flex: 2;
        }
    
    }

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Best City Guide</title>
    	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    	<link rel="stylesheet" href="css/style.css">
    	<link rel="stylesheet" href="css/flexbox.css">
    </head>
    <body>
    	
    	<header class="main-header">
    		<h1 class="name"><a href="#">Best City Guide</a></h1>
    		<ul class="main-nav">
    			<li><a href="#">ice cream</a></li>
    			<li><a href="#">donuts</a></li>
    			<li><a href="#">tea</a></li>
    			<li><a href="#">coffee</a></li>
    		</ul>
    	</header><!--/.main-header-->   
    
    	<div class="banner">
    	<img class="logo" src="img/white-lilly.png" alt="lilly">
    		
    		<h1 class="headline">Simply Divine</h1>
    		<br>
    <!--		<span class="tagline">Feel Good, Look Good.</span>-->
    	</div><!--/.banner-->
    	
    	
    	<div class = "my-row">
    	    <div class = "massage">
    <!--	        <img src ="img/massage1.jpg" alt="massage">-->
    	    </div>
    	</div>
    	
    	<section class ="treatments">
    	<div class="row">		
    		<div class="col">
    			<img src ="img/manicure.jpg">
    		</div><!--/.primary-->
    		
    		<div class="col">
    			<img src ="img/pedicure.jpg">
    		</div><!--/.secondary-->
    		
    		<div class="col">
    		    <img src = "img/massage2.jpg">
    		</div>
    		    
    	</div>
    	
    	<div class ="row">
    	    <div class = "col">
    	        <img src = "img/indian-head-massage.jpg">
    	    </div>
    	    
    	    <div class = "col">
    	        <img src = "img/wrap-massage.jpg">
    	    </div>
    	    
    	    <div class = "col">
    	        <img src = "img/facial.jpg">
    	    </div>
    	</div>
    	</section>
    	
    	<section class ="treatments">
    	<div class="row">		
    		<div class="primary col">
    			
    		</div><!--/.primary-->
    		
    		<div class="secondary col">
    			
    		</div><!--/.secondary-->
    		
    		<div class="third col"></div>
    	</div>
    	</section>
    	
    	
    	<footer class="main-footer">
    		<span>&copy;2015 Residents of The Best City Ever.</span>
    	</footer>
    	
    </body>
    </html>

＆＃13;

Answer 1

您的问题在于您定义图像样式的方式。您从示例链接的当前样式是：

.col img {
    width:250%;
    height:180%; 
}

您可能认为width和height的百分比值意味着＆＃34;原始图片尺寸的百分比更高＆＃34;但是这个值defined into specification的实际含义是＆＃34;包含块的大小的百分比＆＃34;。

要在保持宽高比的同时调整图像大小，您只需控制其大小的一个轴，让浏览器根据图像的实际大小计算相对轴的大小。所以用以下代码替换你的风格：

.col img {
    width:250%;
    height:auto; 
}

将消除超大图像并解决您的图像重叠问题。当然width: 250%也是多余的，因为您不需要使图像大小比容器大小更宽。因此，最终的风格是：

.col img {
    width:100%;
    height:auto; 
}

如何阻止我的Flexbox容器溢出？

1 个答案: