Question

尝试使用响应式设计进行试验。但使用错误的分辨率屏幕并没有帮助。在我的主屏幕上，它看起来很好，它们都排成一行，如果我收缩浏览器，元素会缩小到最小和最大尺寸。

在我的主屏幕（1366 x 768）上，该片段如下所示：

enter image description here

然而，在另一个决议（1280 x 720）上，它扭曲了：

enter image description here

这是我的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%;
            }

我正在努力使它无论分辨率如何，第三张图像都不会下降到另一条线。它应该缩小谢谢你的阅读。

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

CSS响应错误的解决方案

1 个答案: