我在使特定的jQuery库(Windy Slider)自动调整大小方面遇到麻烦。我已将代码上传到CodePen中,可在此处找到http://codepen.io/zyoung0206/pen/rLmXbV

我遇到的问题是,当您单击线框和模型的蓝色圆圈按钮时,将弹出一个带有图像滑块的窗口。这些容器代码是:

.windy-demo {
    /*width: 1024px;*/
    width: 60%;
    margin: 40px auto;
    color: #aaa;
}

.windy-demo ul.wi-container {
/*  width: 1044px;
    height: 788px;*/
    width: 60%;
    height: 80%;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}


可以在CodePen的CSS部分顶部找到。
我要完成的工作是使这些容器的屏幕宽度为60%,并且如果其中的图像太大(例如,容器的宽度为800px,但图像为1024px),则需要调整图像的大小以适合容器内部。

我尝试手动设置容器的宽度(这导致窗口大小固定像素),然后尝试将其设置为width:60%,但是对于大于容器的图像来说效果不佳。

最佳答案

我认为img { width: 100%; height: auto; }会做到的。我刚刚玩过你的小提琴,据我所知,这应该可以工作。
我刚刚更新了答案,以下是对我有用的CSS的第一行,在本地重建示例:

   .windy-demo {
        width: 60%;
        margin: 40px auto;
        color: #aaa;
    }

    .windy-demo ul.wi-container {
        padding: 0;
        margin: 0;

        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    .windy-demo ul.wi-container li {
        display: block; /* Make list items to block in order to stretch 100% */
        overflow-y: hidden; /* Hides the scroll bar y-axis */
    }
    .windy-demo ul.wi-container li img {
        width: 100%; /* makes the image fit 100% of available space */
        height: auto;
    }
    .windy-demo h4 {
        padding: 0 10px;
        line-height: 26px;
        margin: 0;
    }
    .windy-demo ul.wi-container li {
        padding: 0;
        border: 10px solid #fff;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    #slider ......

关于javascript - CSS/Jquery如何自动调整容器和图像的大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38165914/

10-11 12:31
查看更多