Javascript CSS/Jquery如何自动调整容器和图像的大小

我很难将特定的jQuery库（Windy Slider）设置为自动大小。我已经将代码上传到CodePen中，可以在这里找到

我遇到的问题是，当您单击“线框和实体模型”蓝色圆圈按钮时，会弹出一个窗口，其中包含一个图像滑块。这些集装箱代码是：

.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);
}

可以在代码笔的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 ......

---

您可以尝试设置最大宽度：100%；最大高度：图像的100%。@NitinGarg真棒，这很有效，非常感谢。我尝试过高度：自动，但底部的滚动条在图像内。我是否必须使图像/滚动条成为内联块格式，以保持滚动条重新定位到照片底部并居中？抱歉，我已经尝试了您的编辑方法，但是，我遇到了两个问题。首先，图像以压缩大小显示在容器的左上角（希望我能在这里上传图像）。第二，当你在照片中滑动时，它是同一张照片（胡萝卜），直到你反向滑动，然后再向前滑动。第一个问题：可能是在.windy demo ul.wi容器{}中缺少了一个“宽度：100%；”？第二个问题是，当我擦除这些行<代码>。Wry demo ul.Wi-容器Li显示：Bug；/*使列表项被阻止以拉伸100% */OFFROW -Y：隐藏；/*隐藏滚动条Y轴*/}。它开始滚动图像而不刷新同一图像。但是，滚动条放错了地方，我找不到windy.js的有效下载。看起来，这个库非常旧，我无法让您的示例在本地运行。因此很难让它发挥作用。提供windy.js的下载，我会看看我能做些什么。我在哪里可以得到windy.js库？它在这里[（），演示3。很抱歉没有在前面附加这个