0

私はウェブサイトの構築に取り組んでおり、以下は私の望ましい結果です。

希望: http://i.stack.imgur.com/JI7tQ.png 注: 左側に画像があり、合計 5 つの画像になります。

ただし、ブラウザのサイズを変更すると、グリッドイメージが積み重なります..

実際: http://i.stack.imgur.com/tNSLP.png

以下は私のコードです

HTMLコード

<!DOCTYPE html>
<html lang="en">
<head>
    <title>RM</title>
    <meta charset="utf-8"
    <meta name= "viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="css/custom.css" >


</head>
<body>
        <div class="container">
            <div class="port">
                <div id="vertical-title" class="column-1">
                  <img src="http://www.placehold.it/60x650" >
                </div>

                    <div class="row-1">
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                    </div>

                    <div class="row-1">
                        <img src="http://www.placehold.it/550x325" class="img-responsive" >
                        <img src="http://www.placehold.it/550x325" class="img-responsive">
                    </div>
            </div>
        </div>



</body>
<footer>
</footer>
</html>
</html>

CSSコード

img#vertical-title {
    border : 8px;
    border-color : red;
    width : 10%;
}


div#vertical-title{
    display: block;
        float: left;
        margin-left:0%;
}

img.img-responsive  {
  display: inline;
  max-width: 75%;
  height: auto;
}


.column-1 {

    display: inline;
    max-width:5%;
}

.row-1 .container{
    display : inline;
    max-width: 95%;

}
img.row-1{

    display:inline;
    max-width:100%;
}

@media (min-width: 500px) {


div.test h1{
    color:blue;
}
img#vertical-title {
    border : 8px;
    border-color : red;
    width : 10%;
}

img.inline-div {
    width : 25%;
}

}

望ましい動作

4 つの画像の相対的な位置を維持し、ウィンドウが小さくなるにつれて縮小したいと考えています。つまり、2x2 グリッドのサイズを縮小し、4*1 グリッドにならないようにしたいと考えています。

また、一番左の画像の高さを画面の高さと同じにしたいと思います。

注: 画像を重ねると、画像がレスポンシブになります。

質問

この動作を実現する最善の方法は何ですか? 私の腸は JavaScript を叫んでいます。

4

3 に答える 3

0

iPhoneで画像を積み重ねる必要がありますか? メディアクエリを追加できます

@media only screen 
 and (min-device-width : 568px) { img.img-responsive {
    max-width: 49%;
}}

したがって、iPhoneでは積み上げられ、他の場合は目的の効果が表示されます

于 2015-06-25T03:48:01.727 に答える