我已将幻灯片div设置为90％宽度，因此它总是占据屏幕宽度的90％，因此它不会超过屏幕的宽度。唯一的问题是里面的图像不能缩放到div的大小。如果源图像较小，或者如果图像较大，它们要么较小，要么仅显示图像的一部分。如何将幻灯片中的图像始终保持为宽度和宽度。他们所在的div的高度？
.GalleryTXT {
text-align: center;
padding: 20px 150px 0px 150px;
}
#cssSlider {
width: 90%;
height: 400px;
overflow: hidden;
border: 4px solid #0DD587;
margin: 40px auto;
}
#sliderImages {
max-width: 4000px;
height: 400px;
overflow: hidden;
/* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
animation: slide 16s infinite;
-moz-animation: slide 16s infinite;
-webkit-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
}
#sliderImages img {
float: left;
}
@keyframes slide {
0% {
margin-left: 0px;
}
17% {
margin-left: 0px;
}
20% {
margin-left: -800px;
}
37% {
margin-left: -800px;
}
40% {
margin-left: -1600px;
}
57% {
margin-left: -1600px;
}
60% {
margin-left: -2400px;
}
77% {
margin-left: -2400px;
}
80% {
margin-left: -3200px;
}
97% {
margin-left: -3200px;
}
100% {
margin-left: 0px;
}
}
@-moz-keyframes slide {
0% {
margin-left: 0px;
}
17% {
margin-left: 0px;
}
20% {
margin-left: -800px;
}
37% {
margin-left: -800px;
}
40% {
margin-left: -1600px;
}
57% {
margin-left: -1600px;
}
60% {
margin-left: -2400px;
}
77% {
margin-left: -2400px;
}
80% {
margin-left: -3200px;
}
100% {
margin-left: -3200px;
}
}
@-webkit-keyframes slide {
0% {
margin-left: 0px;
}
17% {
margin-left: 0px;
}
20% {
margin-left: -800px;
}
37% {
margin-left: -800px;
}
40% {
margin-left: -1600px;
}
57% {
margin-left: -1600px;
}
60% {
margin-left: -2400px;
}
77% {
margin-left: -2400px;
}
80% {
margin-left: -3200px;
}
100% {
margin-left: -3200px;
}
}
@-o-keyframes slide {
0% {
margin-left: 0px;
}
17% {
margin-left: 0px;
}
20% {
margin-left: -800px;
}
37% {
margin-left: -800px;
}
40% {
margin-left: -1600px;
}
57% {
margin-left: -1600px;
}
60% {
margin-left: -2400px;
}
77% {
margin-left: -2400px;
}
80% {
margin-left: -3200px;
}
100% {
margin-left: -3200px;
}
}<div id="cssSlider">
<div id="sliderImages">
<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" />
<div style="clear:left;"></div>
</div>
</div>
<div class="GalleryTXT">
<p><b>"Ordered this case just the other day & it arrived the very next day in perfect condition. The case is absolute beautiful & just makes the phone look even better which I thought wasn't even possible!, the lovely dark case helps emphasise the phones design. The case is not slippery at all & I have yet to get any marks/ damage onto it" (★★★★★)</b> - Hellen View (Google Pixel)</p><br>
<p><b>"Ordered this case just the other day & it arrived the very next day in perfect condition. The case is absolute beautiful & just makes the phone look even better which I thought wasn't even possible!, the lovely dark case helps emphasise the phones design. The case is not slippery at all & I have yet to get any marks/ damage onto it" (★★★★★)</b> - Jordan Kean (iPhone X)</p><br>
<p><b>"Ordered this case just the other day & it arrived the very next day in perfect condition. The case is absolute beautiful & just makes the phone look even better which I thought wasn't even possible!, the lovely dark case helps emphasise the phones design. The case is not slippery at all & I have yet to get any marks/ damage onto it" (★★★★★)</b> - Nuur Hassan (Samsung S8)</p>
</div>
<div id="cssSlider">
<div id="sliderImages">
<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" />
<div style="clear:left;"></div>
</div>
</div>
<div class="GalleryTXT">
<p><b>"The MWS Bench case fits my new phone perfectly & is just gorgeous!, the wood has such a natural look to it but doesn't have that rough texture you get from natural wood, just lovely, very pleased with my purchase from MWS, will be coming back for more cases in the future. The website is also very easy to manage & just looks great, well done." (★★★★★)</b> - Shiva Sivanesan (iPhone 8)</p><br>
<p><b>"This is my second purchase from MWS & it's just as good as my first purchase with the company. The case just looks amazing & fits the phone perfectly down to the smallest detail. The case feels very protective but doesn't feel like it could easily get damaged, very happy with purchase." (★★★★★)</b> - Shiva Sivanesan (iPhone 8)</p>
</div>
<div id="cssSlider">
<div id="sliderImages">
<img src="http://f.cybrox.eu/codepen/slider/slide1.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
<img src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" />
<div style="clear:left;"></div>
</div>
</div>
代码也可用here
答案 0 :(得分：0)
在项目中添加Jquery。
试试这个：
$(document).ready(function() {
debugger;
var height = $("#sliderImages").height();
var width = $("#sliderImages").width(); // Here you can make it 90% by just computing a width
$("#sliderImages img").css({ height: height, width: width });
});