0

レスポンシブデザインを試してみます。しかし、解像度の低い画面を使用しても効果はありません。私のメイン画面では問題なく見えます。それらはすべて一列に並んでおり、ブラウザーを縮小すると、要素は最小サイズと最大サイズに縮小されます。

メイン画面 (1366 x 768) では、セグメントは次のようになります。

ここに画像の説明を入力

ただし、別の解像度 (1280 x 720) では歪みます。

ここに画像の説明を入力

ここに私のCSSがあります:

//サムネイル

#menu {
    text-align: center; 


    }


.fader {
    /* Giving equal sizes to each element */
    //width:    250px;
    //height:   375px;
    //width:    33%;
    //height:   55%;
    max-width:    250px;
    max-height:   375px;
    min-width:    125px;
    min-height:   188px;  

    /* Positioning elements in lines */
    display:  inline-block;

    /* This is necessary for position:absolute to work as desired */
    position: relative;

    /* Preventing zoomed images to grow outside their elements */
    overflow: hidden; }


    .fader img {
        /* Stretching the images to fill whole elements */
        width:       100%;
        height:      100%;

        /* Preventing blank space below the image */
        line-height: 0;

        /* A one-second transition was to disturbing for me */
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -o-transition:      all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        transition:         all 0.3s ease; }

        .fader img:hover {
            /* Making images appear bigger and transparent on mouseover */
            opacity: 0.5;
            width:   120%;
            height:  120%; }

    .fader .text {
        /* Placing text behind images */
        z-index: -10;     

        /* Positioning text top-left conrner in the middle of elements */
        position: absolute;
        top:      50%;
        left:     50%; }

        .fader .text p {
            /* Positioning text contents 50% left and top relative
               to text container's top left corner */
            margin-top:  -50%; 
            margin-left: -50%;
            }

解像度に関係なく、3番目の画像が別の行に落ちないようにしようとしています。縮小する必要があります 読んでくれてありがとう。

4

1 に答える 1

1

これを試して：

HTML

<body>
     <div class="wrapper">  
        <div class="first">
            <img src="img/CourseExample1.png">
        </div>
        <div class="second">
            <img src="img/CourseExample2.png">
        </div>
        <div class="third">
            <img src="img/CourseExample3.png">
        </div>
     </div> 
</body>

CSS

body{
    margin: 0;
    padding: 0;
}

.wrapper{
    margin:0px auto;
    width: 100%;
}

.first{
    width:33%;
    float: left;
}

.second{
    width:33%;
    float:left;
}

.third{
    width:33%;
    float:left
}

.wrapper img{
width:95%;
}
于 2013-09-06T12:54:22.557 に答える