如何自动调整容器和图像的大小

CSS / Jquery How to auto-size containers and images

本文关键字：图像 何自动 调整 整容      更新时间：2023-09-26

我在获得一个特定的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)，那么图像将调整大小以适应容器。

我已经尝试手动设置容器的宽度(导致窗口大小的固定像素)，然后尝试将其设置为宽度: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 ......
相关文章：