1

タイトルの通りですが、縦は上手く行くのですが横が上手く行きません(横が画面よりはみ出てしまいます)。
何か良い表示方法はありますでしょうか?
お詳しい方いらっしゃいましたらお願いします。

    #img {
        width: 100%;
        height: 33%;
	}

    #img2 {
        width: 100%;
        height: 34%;
	}
    
    #img3 {
        width: 100%;
        height: 33%;
	}
    <div id="img">
        <a href="index.html"><img src="img/image_home_01.jpg"></a>
    </div>
    <div id="img2">
        <a href="index.html"><img src="img/image_home_02.jpg"></a>
    </div>
    <div id="img3">
        <a href="index.html"><img src="img/image_home_03.jpg"></a>
    </div>

8
  • 3つの画像は、画面が拡大縮小もしくは異なる解像度の端末の時に、どのような状態になると良いでしょうか?(幅、画像のサイズなど)。 また、 Monaca 限定のことであれば、そのことの明記をお願いします 2015年1月26日 4:32
  • レス頂きまして有り難うございます。 実際には タブバー 画像1 画像2 画像3 ツールバー のような構成にしております。 画像は横3216px縦2136pxで作成しております。 iphone/andoroid端末でスクロールなしで出せればと思っております。 以上、よろしくお願い致します。 2015年1月26日 4:40
  • 縦に三分割したいのですね。残念ながら、サンプルコードでは、「縦がきちんと分割されておらず、横がはみ出ていない」という状態になってまして問題点が質問と異なるように見えます。質問に張り付けたコードで「縦は三分割された」のですね。(回答者が推測の範囲をまちがわないように確認させていただいています) 2015年1月26日 5:00
  • 大変失礼致しました。 縦横の両方に問題がありました。 以上、よろしくお願い致します。 2015年1月26日 5:03
  • 了解です。横については多分、overflow-x:hidden; の指定で直るのではないかと思います。 2015年1月26日 5:19

2 件の回答 2

1

以下、縦三分割(実質五分割)のサンプルです。

1. flexbox を利用した縦分割レイアウト

body {
    margin: 0;
    padding: 0;
}
.screen {
    display: flex;
    flex-direction: column;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow:hidden;
}
.tabbar, .middle, .upper, .lower, .toolbar {
    width: 100%;
    overflow-y:scroll;
    overflow-x:hidden;
}
.toolbar, .tabbar {
    height: 24px;
    background-color: cyan;
    overflow-y:hidden;
}
.upper {
    flex: 1;
    background-color: pink;
}
.middle {
    flex: 1;
    background-color: lightgray;
}
.lower {
    flex: 1;
    background-color: lightblue;
}
<div class="screen">
<div class="tabbar">tabbar</div>
<div class="upper">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /><br/>
    <p>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1
        <br/>1</p>
</div>
<div class="middle">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <p>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2
        <br/>2</p>
</div>
<div class="lower">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <p>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3
        <br/>3</p>
    </div>
<div class="toolbar">toolbar</div>
</div>

2. position: absolute での縦分割レイアウト

(以下のは古いやり方です。)

.middle, .upper, .lower {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    overflow-y:scroll;
    overflow-x:hidden;
}
.upper {
    top: 0;
    height: 33%;
    background-color: pink;
}
.middle {
    top: 33%;
    height: 34%;
    background-color: lightgray;
}
.lower {
    bottom: 0;
    height: 33%;
    background-color: lightblue;
}
<div class="vsplits">
<div class="upper">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <p>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1
    <br/>1</p>
</div>
<div class="middle">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <p>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2
    <br/>2</p>
</div>
<div class="lower">
    <img width="100%" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />
    <p>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3
    <br/>3</p>
</div>
</div>

1
#img {
    width: 100%;
    height: 33%;
}

#img img {
    width: 100%;
}

#img2 {
    width: 100%;
    height: 34%;
}

#img2 img {
    width: 100%;
}

#img3 {
    width: 100%;
    height: 33%;
}

#img3 img {
    width: 100%;
}

これで治ると思います。
img要素にwidth値が指定されていないので、divの100%を無視して画像そのままのpxで表示されてしまいす。
親要素としてdiv要素を付けると、もっと綺麗にCSSを縮小できます。
求めている結果と違いましたら申し訳ございません。

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

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