Wie kann ich eine spotify eingebettete Wiedergabeliste konfigurieren?

Wie füge ich ein Bild in dieses Kreisraster ein, ohne die Abmessungen des Bildes zu ändern?Wie kann ich eine spotify eingebettete Wiedergabeliste konfigurieren?

Jedes Mal, wenn ich ein Bild einfüge, ändert sich die Größe des Kreises.

Ich machte ein Beispiel. Das Katzenbild zerquetscht den Kreis. Ich möchte, dass die Kreise wie die mit dem Platzhalterbild aussehen. Was kann getan werden, um dies zu vermeiden? Vielen Dank.

ul { 
 
padding:0; 
 
margin:0; 
 
display:grid; 
 
grid-template-rows: repeat(auto-fill, 220px); 
 
grid-template-columns: repeat(auto-fill, 220px); 
 
grid-gap:0px; 
 
    padding-left: 100px; 
 
} 
 
li.small { 
 
width:200px; 
 
height:200px; 
 
border-radius: 50%; 
 
grid-row:auto/span 1; 
 
grid-column:auto/span 1; 
 
margin:10px 0; 
 
} 
 

 
li.big { 
 
margin:0; 
 
width:400px; 
 
height:400px; 
 
background-color:black; 
 
border-radius: 50%; 
 
grid-row:auto/span 2; 
 
grid-column: auto/span 2 
 
} 
 
li { 
 
display:block; 
 
padding:0; 
 
margin:0; 
 
align-self:center; 
 
justify-content: center; 
 
} 
 

 

 
/* HOVER EFFECT - NOT BY ME - @mrjones on Codepen.io* */ 
 

 

 
.do-circle { 
 
    border-radius: 50%; 
 
} 
 

 
.do-item { 
 
    width: 100%; 
 
    height: 100; 
 
    position: relative; 
 
} 
 

 
.do-item-circle { 
 
    max-width: 200px; 
 
} 
 

 
.do-info-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: calc(100% - 40px); 
 
    height: calc(100% - 40px); 
 
    transition: all 0.4s ease-in-out; 
 
    perspective: 800px; 
 
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2); 
 
} 
 

 
.do-info { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.4s ease-in-out; 
 
    transform-style: preserve-3d; 
 
    
 
} 
 

 
.do-info > div { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
    
 
} 
 

 
.do-info .do-info-back { 
 
    transform: rotate3d(0, 1, 0, 180deg); 
 
    background: #acca88; 
 
} 
 

 
.do-info h3 { 
 
    color: #fff; 
 
    letter-spacing: 2px; 
 
    font-size: 14px; 
 
    margin: 0 15px; 
 
    padding: 40px 0 0 0; 
 
    height: 90px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.do-info-back { 
 
    text-align: center; 
 
} 
 

 
.do-info-back > div { 
 
    color: #fff; 
 
    padding: 10px 5px; 
 
    margin: 0 30px; 
 
    font-size: 12px; 
 
    border-top: 1px solid #fff; 
 
} 
 

 
.do-item:hover .do-info-wrap { 
 
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8); 
 
} 
 

 
.do-item:hover .do-info { 
 
    transform: rotate3d(0, 1, 0, -180deg); 
 
} 
 

 
.link { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 

 

 
}

<ul> 
 
<li class="small"> 
 
      <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <a class="link" href="index.html"><h3>title here<br><br><font size="1px">name here</font></h3></a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
     <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     </li> 
 
     <li class="small"> 
 
     <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     </li> 
 
     <li class="small"> 
 
     <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     </li> 
 
     <li class="small"> 
 
     <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     </li><li class="small"> 
 
     <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
     </li> 
 
     </ul>

Quelle

2017-08-10 johnstont05

zu Ihrem Stylesheet hinzufügen:

img.do-item { 
    width: 200px; 
    height: 200px; 
    object-fit: cover; 
}

ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    display: grid; 
 
    grid-template-rows: repeat(auto-fill, 220px); 
 
    grid-template-columns: repeat(auto-fill, 220px); 
 
    grid-gap: 0px; 
 
    padding-left: 100px; 
 
} 
 

 
li.small { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    grid-row: auto/span 1; 
 
    grid-column: auto/span 1; 
 
    margin: 10px 0; 
 
} 
 

 
li.big { 
 
    margin: 0; 
 
    width: 400px; 
 
    height: 400px; 
 
    background-color: black; 
 
    border-radius: 50%; 
 
    grid-row: auto/span 2; 
 
    grid-column: auto/span 2 
 
} 
 

 
li { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
    align-self: center; 
 
    justify-content: center; 
 
} 
 

 

 
/* HOVER EFFECT - NOT BY ME - @mrjones on Codepen.io* */ 
 

 
.do-circle { 
 
    border-radius: 50%; 
 
} 
 

 
.do-item { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
img.do-item { 
 
    width: 200px; 
 
    height: 200px; 
 
    object-fit: cover; 
 
} 
 

 
.do-item-circle { 
 
    max-width: 200px; 
 
} 
 

 
.do-info-wrap { 
 
    position: absolute; 
 
    top: 20px; 
 
    left: 20px; 
 
    width: calc(100% - 40px); 
 
    height: calc(100% - 40px); 
 
    transition: all 0.4s ease-in-out; 
 
    perspective: 800px; 
 
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2); 
 
} 
 

 
.do-info { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: all 0.4s ease-in-out; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.do-info>div { 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
} 
 

 
.do-info .do-info-back { 
 
    transform: rotate3d(0, 1, 0, 180deg); 
 
    background: #acca88; 
 
} 
 

 
.do-info h3 { 
 
    color: #fff; 
 
    letter-spacing: 2px; 
 
    font-size: 14px; 
 
    margin: 0 15px; 
 
    padding: 40px 0 0 0; 
 
    height: 90px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.do-info-back { 
 
    text-align: center; 
 
} 
 

 
.do-info-back>div { 
 
    color: #fff; 
 
    padding: 10px 5px; 
 
    margin: 0 30px; 
 
    font-size: 12px; 
 
    border-top: 1px solid #fff; 
 
} 
 

 
.do-item:hover .do-info-wrap { 
 
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8); 
 
} 
 

 
.do-item:hover .do-info { 
 
    transform: rotate3d(0, 1, 0, -180deg); 
 
} 
 

 
.link { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    overflow: hidden; 
 
}

<ul> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <a class="link" href="index.html"> 
 
       <h3>title here<br><br> 
 
        <font size="1px">name here</font> 
 
       </h3> 
 
       </a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="small"> 
 
    <div class="col-sm-3"> 
 
     <div class="do-item do-item-circle do-circle"> 
 
     <img src="http://placehold.it/261x261" class="do-item do-circle"> 
 
     <div class="do-info-wrap do-circle"> 
 
      <div class="do-info"> 
 
      <div class="do-info-front do-circle"></div> 
 
      <div class="do-info-back do-circle"> 
 
       <h3>title here</h3> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

Quelle

2017-08-10 00:48:00 Cole

Wie kann ich eine spotify eingebettete Wiedergabeliste konfigurieren?

Antwort

Verwandte Themen