您們好，最近試著做RWD網頁，上網找了個圖片輪播範例
圖片輪播範例:https://www.minwt.com/webdesign-dev/css/19715.html/comment-page-1#comment-22703
實作時遇到了問題，因為是採RWD架構，
我把width&height改成100%，下方的文字就會跟輪播圖片重疊，被蓋在圖片下了
想請問這該怎麼解決呢?
想要的結果是：
div class="coverflow"
div class="navbar"
兩區不重疊，圖片輪播也能根據畫面正常縮小，謝謝
程式碼：https://gist.github.com/studentbow/02366d9aae751da470a8789316bdbd00
已邀請的邦友 {{ invite_list.length }}/5
我剛試了一下
我是這樣改的
因為你那個範例height是寫死的
你設100%會沒效果
範例是寫成跟圖片同高
改成max-height等於圖片高度
不要用height
然後padding-bottom讓navbar往下移
.coverflow{
width: 100%;
max-height:750px;
position: relative;
padding-bottom: calc(95%/2);
}
縮小會變成下面這樣
參考看看
您好，這方法我有試過
因為是RWD，圖片縮小就會有空白畫面跑出來，這樣不行，還再研究其他方法中，謝謝
student
圖片縮小?
是畫面縮小吧?
輪播的圖片不是應該固定大小???
您好，我是想做這樣的效果：https://www.carrefour.com.tw/
畫面縮小，輪播圖片也跟著縮小，謝謝
student
原來是這樣
那你問題應該改一下吧...
差太多了
我修改下標題，以及想要的結果
有好方法還請指點，感謝
student
我修改了
你試試看
您好，成功了，是我想要的效果，感謝您
方便的話想多請教下： calc(95%/2);＜這段是什麼意思呢？
看了網上說明，不太懂為何計算式裡是（95%/2）？
我後來改成（36%/2），就剛剛好了
以及這CSS似乎在IE11不能正常執行（嘆）
student
那個是我在macbook試出來的
修正一下剛剛說錯了
數字不同大概跟圖片大小有關係
student
用body onresize去做會比較好
css
.coverflow{
width: 100%;
max-height:90px;
position: relative;
}
.img{
}
js
function ReSize(){
document.getElementById('coverflow').style.paddingBottom= document.getElementsByClassName('img')[0].height+'px';
}
html
<body onload="ReSize();" onresize="ReSize();">
<div class="coverflow" id="coverflow">
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1166434_679992.jpg">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1166434_679992.jpg">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
</div>
// 剩下的內容
</body>
這個IE10以上也行
您好，我嘗試了下，IE可用
但這語法似乎不能自動縮放大小（？）
student
剛剛試了一下IE圖片確實不會縮放
但是chrome會
IE真詭異...
student
發現這邊改一下就好了
.coverflow>a>img{
width: 100%;
}
您好...我改了改... 有點亂套冏
您方便貼完整的程式碼嗎？
<!DOCTYPE html>
<html>
<head>
<title>Allroung Trading co., Ltd.</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.coverflow{
width: 100%;
max-height:90px;
position: relative;
}
.coverflow>a{
display: block;
position: absolute;
top:0;
left:0;
opacity: 0;
filter: alpha(opacity=0);
/*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
-webkit-animation: silder 25s linear infinite;
animation: silder 25s linear infinite;
}
.coverflow>a>img{
/* max-width: 100%; */
width: 100%;
}
.img{
}
/*動畫關鍵影格*/
@-webkit-keyframes silder {
3% {
opacity: 1;
filter: alpha(opacity=100);
}
27% {
opacity: 1;
filter: alpha(opacity=100);
}
30% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes silder {
3% {
opacity: 1;
filter: alpha(opacity=100);
}
27% {
opacity: 1;
filter: alpha(opacity=100);
}
30% {
opacity: 0;
filter: alpha(opacity=0);
}
}
/*每個圖片各延遲5秒*/
.coverflow>a:nth-child(5) {
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
.coverflow>a:nth-child(4) {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.coverflow>a:nth-child(3) {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.coverflow>a:nth-child(2) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.coverflow>a:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
/*滑入時停止播放*/
.coverflow:hover>a{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background:#686868;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
text-align: center;
margin: 0px auto;
font-size: 14px;
font-weight: bold
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 10px 20px;
text-decoration: none;
text-align: center;
margin: 0px auto;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
text-align: center;
margin: 0px auto;
}
.navbar > a{
width: 100%;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 18%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-image: url(image/background/white.png);
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
}
/* Footer */
.footer {
padding: 1px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
.row, .navbar {
flex-direction: column;
}
}
img
{
height: auto;
max-width: 100%;
display: block;
}
#spic
{
line-height:10px;
padding:5px;
float:left;
}
</style>
<script type="text/javascript">
function ReSize(){
document.getElementById('coverflow').style.paddingBottom= document.getElementsByClassName('img')[0].height+'px';
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="ReSize();" onresize="ReSize();">
<!-- Header -->
<!-- <div class="header">
<h1>Allroung Trading co., Ltd.</h1>
<p>With a <b>flexible</b> layout.</p>
</div> -->
<div class="coverflow" id="coverflow">
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1166434_679992.jpg">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1166434_679992.jpg">
</a>
<a href="#">
<img class="img" src="https://adpic.pchome.com.tw/adpics/pic_1174528_683338.gif">
</a>
</div>
<div class="navbar" >
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
<!-- Navigation Bar -->
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About us</h2>
<!--<h5>立刻联络我們：</h5>-->
<!--<div class="fakeimg" style="height:200px;">Image</div>-->
<div style="width: 100%"><img src="image/button/map1.png" alt="about"></div>
<br><br>
<h3>More Infotmation</h3>
<!--<h5>众才公司产品：</h5>-->
<div style="width: 100%">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product01','','image/button/button_11.png',1)"><img id="product01" src="image/button/button_1.png" alt="test"></a> </div><br>
<div class="width:100%">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product02','','image/button/button_21.png',1)"><img id="product02" src="image/button/button_2.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Consumable parts">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product03','','image/button/button_31.png',1)"><img id="product03" src="image/button/button_3.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Accessort equipment">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product04','','image/button/button_41.png',1)"><img id="product04" src="image/button/button_4.png" alt="test"></a>
</div><br>
<div style="width: 100%" alt="Electronic parts">
<a href="web/about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('product05','','image/button/button_51.png',1)"><img id="product05" src="image/button/button_5.png" alt="test"></a>
</div><br>
<!--<div class="fakeimg" style="height:60px;">image</div>-->
</div>
<div class="main">
<h2>NEWS</h2>
<h5>
<span style="color: #F9020A">※ test</span><br>
※ test<br>
※ test<br>
※ test<br>
</h5>
<!--<div class="fakeimg" style="height:200px;">Image</div>-->
<div style="width: 100%">
<img src="image/OKK.png" alt="OKK">
</div>
<div>
<br>
<span style="font-weight: bold"> test</span>
<h5>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
※ test<br>
</h5>
</div>
<br>
<div class="spic">
<img src="image/t1.png" style="float: left; padding-right: 20px;">
<img src="image/t2.png" style="padding-right: 20px;">
</div>
<p>
<!--<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>-->
<br>
<h2>test</h2>
<h5> test
</h5>
<div style="width: auto">
<img src="image/chapman.png">
</div>
<!--<div class="fakeimg" style="height:200px;"></div>-->
<h5> test
<br><br> test
<br><br>
test
</h5>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h6>
test<br>
test<br>
test
</h6>
</div>
</body>
</html>
感謝您
剛剛研究，padding-bottom: calc(33%/2);這排還是要加，不然我的圖又會重疊下方內容，可能是圖太長有超過螢幕寬的關係（？）
student
應該不用+才對
ReSize()會自動幫你調padding-bottom
還是你忘記把max-height調成你的圖片高?
您好，有的，我有調圖片高度
如果不加，就會重疊
iThome鐵人賽
看影片追技術