1
我有一個只用CSS創建的旋轉木馬，但我發現了一些困難。所有圖像都在4：3縱橫比，並且可以具有640×480像素的最大（即，它們可以比該值更小），所以：只有CSS旋轉木馬：定心和固定大小的問題
- 我不能居中下一個和前一個箭頭;
- 箭頭不能在屏幕上「浮動」（如果下一個圖像是 小於前一個，箭頭不應該改變 的位置）。
- 我不知道如何根據當前使用的最大圖像 來設置輪播的大小。
代碼：
html {
font-size: 10px;
}
body {
padding: 2rem;
background: #F8F8F8;
font-size: 16px;
}
.wrap {
max-width: 70rem;
margin: auto;
padding: 2rem;
background: #FFF;
}
.carousel {
position: relative;
display: -webkit-box;
display: flex;
max-width: 64rem;
min-height: 40rem;
margin: auto;
background: red;
-webkit-box-pack: center;
justify-content: center;
}
.group {
display: -webkit-box;
display: flex;
background: blue;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}
.group input {
position: absolute;
top: -100%;
left: -100%;
display: none;
}
.group input ~ .content {
/* tentar fixar tamanho aqui */
display: none;
-webkit-box-ordinal-group: 3;
order: 2;
}
div.group input:checked ~ div.content {
display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
display: block;
}
div.group label {
top: 50%;
display: none;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #69C;
transform: translateY(-50%);
}
img {
width: 100%;
height: 100%;
}
label {
margin: 125px 0 0 0;
font-size: 4em;
}
label.previous {
padding: 0 0 30px 5px;
-webkit-box-ordinal-group: 2;
order: 1;
}
label.next {
padding: 0 5px 25px 0;
text-align: right;
-webkit-box-ordinal-group: 4;
order: 3;
}<!DOCTYPE html>
<html>
<head>
<title>Teste 3</title>
<link rel="stylesheet" type="text/css" href="teste3.css">
<meta charset="utf-8">
</head>
<body>
<div class="wrap">
<div class="carousel">
<div class="group">
<input type="radio" name="test" id="0" value="0">
<label for="4" class="previous"><</label>
<label for="1" class="next">></label>
<div class="content">
<img src="https://www.oneperiodic.com/products/photobatch/tutorials/img/scale_original.png" width="200" height="286">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="1" value="1">
<label for="0" class="previous"><</label>
<label for="2" class="next">></label>
<div class="content">
<img src="https://www.ausmedia.com.au/Mmedia/4TO3.gif" width="200" height="139">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="2" value="2">
<label for="1" class="previous"><</label>
<label for="3" class="next">></label>
<div class="content">
<img src="http://www.cegepsherbrooke.qc.ca/~cpi/images/photo_4-3.jpg" width="140" height="200">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="3" value="3" checked="">
<label for="2" class="previous"><</label>
<label for="4" class="next">></label>
<div class="content">
<img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" width="200" height="287">
</div>
</div>
<div class="group">
<input type="radio" name="test" id="4" value="4">
<label for="3" class="previous"><</label>
<label for="0" class="next">></label>
<div class="content">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-for-monitor-4-3-almost-square-awesome/wallpaper-for-monitor-4-3-almost-square-awesome-951.jpg" width="96" height="139">
</div>
</div>
</div>
</div>
</body>
</html>誰能幫我找到一個解決方案或在測量中的至少一個餘額？
我之前用這個，但是，因爲你可以當我們看到更大的圖像時，當圖像大小改變時，箭頭會再次浮在屏幕上。 – Bianca
你能解釋一下你想達到什麼嗎？可能是您如何不管圖像大小而定位箭頭的粗略草圖。 – Sagar
如果可能，我不會這麼做，但我希望CSS能夠在此時識別傳送帶中的較大圖像，然後將其用作此特定傳送帶的最大高度。這樣，我就可以修復尺寸，所有其他圖像將被集中。這是一張圖片：[link]（http://bashooka.com/wp-content/uploads/2012/04/css3-slider-2.jpg）。 – Bianca