如何配置Spotify嵌入播放列表？

Question

如何在不改变图像尺寸的情况下将图片插入此圆形网格？

每次插入图片时，它都会改变圆的大小。

我做了一个例子。猫的图像压扁了这个圆圈。我希望这些圈子看起来像带有占位符图片的圈子。可以做些什么来避免这种情况？谢谢。

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>

Answer 1

添加到您的样式表：

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>