html - 如何配置 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>