问题描述
我的问题是关于将图像调整为一个部分的大小,我认为这称为容器.是否有人碰巧知道如何做到这一点.我已经包含了所涉及方面的代码.
My question is regarding sizing of images into a section, which I think is called a container. Does anybody happen to know how to do this.I've included the code of the aspects involved.
HTML
<div id="slideshow">
<div>
<img src="Img1.jpg">
</div>
<div>
<img src="Img2.jpg">
</div>
<div>
<img src="Img3.jpg">
</div>
</div>
CSS
img {
width: 100%;
height: auto;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
JS
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
推荐答案
首先,我爱你的精力旺盛的人,太神奇了.:)
First of all, I love your energy man, amazing. :)
您只想要几行结果.
错误之一是您实际上没有将 css
中的 slideshow
div定位为目标,而是将其定位为 .slideshow
,并且这是错误的,因为幻灯片是ID,因此您应该在 中说 #slideshow
.
One of the errors was that you didnt actually target the slideshow
div in your css
, you were targeting it as .slideshow
, and that is wrong because slideshow is an ID, so you should say #slideshow
in your css
.
最后要做的是使图像始终完全适合您的容器,您可以使用 width:100%;来完成.高度:100%;对象适合:封面;
And the last thing that you gotta do is make your images always fully fit your container, you can do this by using width : 100%; height: 100%; object-fit: cover;
只需用此代码替换当前的 css
,它就可以工作了:)
Just replace your current css
with this one, and it should work :)
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#slideshow {
margin: 80px auto;
position: absolute;
top: 20%;
left: 22%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow {
height: 300px;
width: 300px;
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
这篇关于如何使图像适合简单的自动播放幻灯片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!