0

I am trying to build a "mobile first" web app. And in doing so I am using the meta attribute "viewport" to help scale the elements appropriately.

But I want certain elements to be fixed size. For example I want the div below to be 598(h)x450(w). 

<div class="note">
  <div class="note_text">Its my birthday, and I have treated myself to a very nice gift.   </div> 
  <img class="sticker" src="/assets/sally/sally_04.png"/>
</div>

.note {
    margin-left: 20px;
    height: 598px;
    width: 450px;
}

.sticker {
    width:300px;
    height:300px;
    position: relative;
}

On the iphone this resolution should technically fit in a single screen (when scrolled down to the top of the div element). However the div element is rendering longer than expected. Why?

Am i missing something super obvious?

4

1 回答 1

3

好吧，您能否更具体一点，例如您在元标记中给出的缩放比例和图像的实际大小？

但在此之前，解决方法可以是在贴纸类中以“%”而不是“像素”给出宽度和高度。确保保持高宽比，以免图像看起来被拉伸和不成比例。

就像是：

**.sticker {
    width:65%;   /* or keep width:100% and don't specify the height*/
    height:40%;
    position: relative;
}**
于 2013-09-06T09:25:46.917 回答