我在使特定的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/