4

Monaca 新規プロジェクトから選択できるテンプレートの "Train Catalog" で、リストから参照される電車の画像には、上下左右に余白があります。

画像の余白

この余白をなくし画像を表示することは可能でしょうか?

<div data-role="page" id="tokaido-page">
    <div data-role="header" data-position="fixed" class="jqm-header-custom" data-theme="c">
        <h1>Train Catalog</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">Tokaido Shinkansen Trains</li>
            <li><a href="#" onclick="showDetail('0kei', 'Series 0')">Series 0</a></li>
        </ul>

CSS は以下のようになっています。

display: block;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
0

1 件の回答 1

1

ページ自体が padding: 15, イメージが margin: 0 5 0 5 を持っているので、それらの値を 0px にします。

<div data-role="page" id="detail-page">

<div data-role="page" id="detail-page" class="train-page">

に変えて、 style.css に以下を追加してください。

.train-page {
    padding-top: 0px !important;
}

.train-page .ui-content {
    padding: 0px;
}

.train-page .ui-content #train-image {
    margin: 0px;
    width:100%;
    height:100%;
}
2
  • 教えていただいた方法で解決できました。 ありがとうございました!
    – user8011
    2015年2月2日 2:17
  • @user8011 本回答で解決した場合には回答の承認をよろしくお願いします。ja.stackoverflow.com/help/someone-answers
    – tomute
    2015年2月19日 15:58

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。