PhoneGap中文网

标题: 求助:图片太大,显示不完全 [打印本页]

作者: nadou1010    时间: 2015-2-10 13:01
标题: 求助:图片太大,显示不完全
<!doctype html>
<html lang="en">
<head>

<title>Document</title>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.2.min.js"></script>
<style>
   .fenduan{
            text-align: center;
    }
   .ui-controlgroup{
            margin-top: 10px;
            width: 100% !important;
    }
   .ui-controlgroup-controls{
            width: 100%;
    }
   .fenduan a{
            width: 25% !important;
            box-sizing:border-box;
    }
   .gallery img {
     display: block;
     height: auto;
     width: 100%;
    }
</style>


</head>

<body>
<div data-role="page" id="home">

  <div data-role="header">
    <h1>麦田一角</h1>
<img src="header.jpg">
   <div class="fenduan">
      <div data-role="controlgroup" data-type="horizontal">
    <a data-role="button" href="#suipai" date-transition="pop">随拍</a>
    <a data-role="button" href="#" date-transition="pop">模拍</a>
    <a data-role="button" href="#" date-transition="pop">作品</a>
    <a data-role="button" href="#" date-transition="pop">风景</a>
      </div>   
   </div>
  </div>

  <div data-role="content" >
   <div class="ui-grid-a">
     <div class="ui-block-a"><img src="01.jpg"><span>叶落深秋</span><a href="#" data-role="button">看大图</a><br>
     </div>
     <div class="ui-block-b"><img src="02.jpg"><span>古城残影</span><a href="#" data-role="button">看大图</a><br>
     </div>
   </div>
  </div>
  </div>

  <div data-role="footer" data-position="fixed">
    <h4>个人摄影展,非商业展示</h4>
  </div>

</div>

<div data-role="page" id="suipai">
  <div data-role="header">
<h1></h1>
<div class="fenduan">
   <div data-role="controlgroup" data-type="horizontal">
    <a data-role="button" href="#suipai" date-transition="pop">随拍</a>
    <a data-role="button" href="#" date-transition="pop">模拍</a>
    <a data-role="button" href="#" date-transition="pop">作品</a>
    <a data-role="button" href="#" date-transition="pop">风景</a>
   </div>   
</div>
  </div>

  <div data-role="content">
    <p>随拍!</p>
  </div>

  <div data-role="footer" data-position="fixed">
    <h4>个人摄影展,非商业展示</h4>
  </div>

</div>

</div>

我是并列两排显示的,谁能帮我看看啊,为什么我放进去的图片,显示很大的,每一列都只能显一部分而已。怎么样才能把所有的图片都自动适应大小?


作者: hql    时间: 2015-6-1 13:49
我也来看看 html5 app
作者: 少先队来了    时间: 2015-6-1 13:56
向前辈学习中 顶起




欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2