

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

![画像の余白](https://i.stack.imgur.com/epINe.jpg)

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

[code]

    <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>
    
[/code]

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

[code]

    display: block;
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
    height: 100%;
    
[/code]


CC BY-SA 3.0
2015-02-01T18:53:05.457
5712
2020-02-25T10:56:40.570
2020-02-25T10:56:40.570
32986
8011
question
monaca css
テンプレート「Train Catalog」でリストから参照される画像を全画面表示したい


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

[code]

    <div data-role="page" id="detail-page">
    
[/code]

を

[code]

    <div data-role="page" id="detail-page" class="train-page">
    
[/code]

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

[code]

    .train-page {
        padding-top: 0px !important;
    }
    
    .train-page .ui-content {
        padding: 0px;
    }
    
    .train-page .ui-content #train-image {
        margin: 0px;
        width:100%;
        height:100%;
    }
    
[/code]


CC BY-SA 3.0
2015-02-02T01:52:00.633
5717
2015-02-02T01:52:00.633
4978
5712
answer