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%;
            }

我正在努力做到这一点，以便无论分辨率如何，第三张图像都不会下降到另一行。它应该只是缩小感谢您的阅读。

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 回答