2
Ich habe eine horizontale Akkordeons mit Hintergrundbildern gemacht, aber die Bilder sind ziemlich groß im Vergleich zu der Breite der Akkordeons. Ich möchte, dass die Akkordeons die Hintergrundbilder verkleinern, im Moment sehe ich nur die Mitte jedes Hintergrundbildes.Akkordeon Hintergrund-Bild Größe
Hier ist mein Code: (Probe)
.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>
Die "100% 100%" hat den Job gemacht. Es schafft jedoch ein neues Problem. Ich weiß nicht, ob Sie diese Seite sehen können (es ist nicht meins, aber es ist, wo ich die Idee hatte). http://www.t-randeris.dk/cases.aspx Wenn Sie die Maus über das Bild halten, ist die Größe perfekt, aber wenn die Maus wegbewegt wird, "quetscht" sie das Bild zusammen, anstatt nur "zu verstecken" der Rest des Bildes. –
ja es drückt, da seine Breite von der Breite der Akkordeons und seit seiner ein Hintergrundbild basiert. anders als das Akkordeon von der Verbindung, die du gabst. Sie können versuchen, eine feste Breite für Ihr Bild festzulegen. Ich habe eine [fidde] (http://fiddle.jshell.net/xY7tx/2477/) gemacht. Bitte überprüfen Sie, ob das richtig ist – Abbr
Aber Ihre zeigt immer noch nicht das ganze Bild (oder tut es)? Ich habe versucht, "Hintergrundgröße: Cover" zu verwenden, und dies scheint die beste Option bisher zu sein. Es zoomt ein kleines bisschen, aber es ist viel besser als vorher. –