Question

在我的笔记本电脑上检查我的响应式网站时，它使用百分比很好地缩放，但是当我在我的iPhone上检查它时，它会为我的垂直行图像添加一个巨大的上边距。有什么想法吗？该网站位于http://edharrisondesign.com/pocketpictograms/

提前致谢！

HTML：

    <!-- Pocket
================================================== -->

    <figure>
        <div class="main-pocket"><img src="images/assets/pocket.png"></div>
        <div class="padding"></div>
    </figure>

<!-- Icons
================================================== -->

    <div class="inside-pocket">
        <div class="icon-container">
            <img class="pictogram" src="images/pocket-pics/pencil.png"> 
            <img class="pictogram" src="images/pocket-pics/iphone.png"> 
            <img class="pictogram" src="images/pocket-pics/earphones.png">  
            <img class="pictogram" src="images/pocket-pics/camera.png"> 
            <img class="pictogram" src="images/pocket-pics/film.png">   
            <img class="pictogram" src="images/pocket-pics/scalpol.png">    
            <img class="pictogram" src="images/pocket-pics/paintbrush.png"> 
            <img class="pictogram" src="images/pocket-pics/fineliner1.png"> 
            <img class="pictogram" src="images/pocket-pics/fineliner2.png"> 
            <img class="pictogram" src="images/pocket-pics/notepad.png">    
            <img class="pictogram" src="images/pocket-pics/mouse.png">  
            <img class="pictogram" src="images/pocket-pics/glasses.png">    
            <img class="pictogram" src="images/pocket-pics/lighter.png">    
            <img class="pictogram" src="images/pocket-pics/pipe.png">   
            <img class="pictogram" src="images/pocket-pics/flask.png">  
            <img class="pictogram" src="images/pocket-pics/matches.png">    
            <img class="pictogram" src="images/pocket-pics/watch.png">  
            <img class="pictogram" src="images/pocket-pics/pocket-watch.png">   
            <img class="pictogram" src="images/pocket-pics/key.png">    
            <img class="pictogram" src="images/pocket-pics/car-key.png">    
        </div>             
    </div>

CSS：

figure {
    z-index: 97;
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 40%;
    text-align: center;
}  

.padding {
  z-index: 95;
  position:  relative;
  background-color: #D2D2D2;
  height: 100%;
  width: 100%;
  top: -50px;
  overflow: hidden;
  border-bottom: 50px solid #D2D2D2;
}    

.main-pocket img {
   z-index: 96;
   position: relative;
   width: 30%;
   height: auto;
   margin: 0 auto;
   max-width: 300px;
} 

 .inside-pocket {
   width: 100%;
   height: 100%;
   position: absolute;
   margin: 0 auto;
   text-align: center;
 }

 .icon-container {
    position: relative;
    max-width: 300px;
    width: 30%;
    top: 37%;
    margin: 0 auto;
}

.pictogram {
    height: auto;
    width: 100%;
    margin-bottom: 200%;
}

Answer 1

好吧我知道我哪里出错了 - 我本应该将。上边距设置为.inside-pocket类而不是.icon-container类。标记在这里：

/* #Pocket
================================================== */
figure {
z-index: 97;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 40%;
text-align: center;
}  

.padding {
z-index: 95;
position:  relative;
background-color: #D2D2D2;
height: 100%;
width: 100%;
top: -50px;
overflow: hidden;
border-bottom: 50px solid #D2D2D2;
}    

.main-pocket img {
z-index: 96;
position: relative;
width: 30%;
height: auto;
margin: 0 auto;
max-width: 300px;
} 

.inside-pocket {
width: 100%;
height: 100%;
top: 37%;
position: absolute;
margin: 0 auto;
text-align: center;
}

.icon-container {
position: relative;
max-width: 300px;
width: 30%;
margin: 0 auto;
}

.pictogram {
height: auto;
width: 100%;
margin-bottom: 200%;
}

如果有人能让我知道为什么这是正确的，那就太棒了！干杯

iPhone正在为图像增加一个上边距

1 个答案: