2
私は背景画像で横長のアコーディオンを作成しましたが、画像はアコーディオンの幅に比べてかなり大きいです。私はアコーデオンが背景画像を縮小するようにしたい、今私はそれぞれの背景画像の中心を見るだけです。アコーディオンの背景画像のサイズ
はここに私のコードです：あなたは、現在の背景として画像を使用しているとして（サンプル）
.accordion {
width: 100%;
max-width: 1080px;
height: 400px;
overflow: hidden;
margin: 50px auto;
}
.accordion ul {
width: 100%;
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
}
.accordion ul li {
display: table-cell;
vertical-align: bottom;
position: relative;
width: 16.666%;
height: 400px;
background-repeat: no-repeat;
background-position: center center;
transition: all 500ms ease;
}
.accordion ul li:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1460500063983-994d4c27756c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=27c2758e7f3aa5b8b3a4a1d1f1812310");
}
.accordion ul li:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c");
}
.accordion ul li:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1458400411386-5ae465c4e57e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=47756f965e991bf72aa756b410929b04");
}
.accordion ul li:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1452827073306-6e6e661baf57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c28fd5ea58ed2262a83557fea10a6e87");
}
.accordion ul li:nth-child(5) {
background-image: url("https://images.unsplash.com/photo-1452215199360-c16ba37005fe?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=408c70a6e88b50949c51e26424ff64f3");
}
.accordion ul li:nth-child(6) {
background-image: url("https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1920&h=1280&q=80");
}
.accordion ul:hover li {
width: 8%;
}
.accordion ul:hover li:hover {
width: 100%;
}
.accordion ul:hover li:hover a {
background: rgba(0, 0, 0, 0.4);
}
.accordion ul:hover li:hover a * {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
@media screen and (max-width: 200px) {
body {
margin: 0;
}
.accordion {
height: auto;
}
.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
-webkit-transition: none;
transition: none;
}
}
.about {
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #666;
}
.about a {
color: blue;
text-decoration: none;
}
.about a:hover {
text-decoration: underline;
}<body>
<div class="accordion">
<ul>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
<li>
<div>
<a href="#">
</a>
</div>
</li>
</ul>
</div>
<body>
"100％100％"がジョブを実行しました。それはしかし、新しい問題を作成します。 このページを見ることができるかどうかわかりません（それは私のものではありませんが、私はそこから考えを得ています）。 http://www.t-randeris.dk/cases.aspx 画像の上にマウスを置くと、サイズは完璧ですが、マウスを離すと「隠す」のではなく、画像が一緒に「絞られます」写真の残りの部分。 –
はい、それは幅がアコーディオンの幅からのものであり、その背景画像からのものであるため、スクイズします。あなたが与えたリンクからのアコーデオンとは異なります。イメージの固定幅を設定してみてください。私は[fidde]（http://fiddle.jshell.net/xY7tx/2477/）を作った。 plsがこれが正しいかどうかを確認してください – Abbr
しかしあなたはまだ全体の画像を表示しませんか？ "background-size：cover"を使ってみましたが、これはこれまでのところ最良の選択肢のようです。それは小さなビットで拡大しますが、以前よりもはるかに優れています。 –