Question

我正在使用一个图片库，该图片库在同一个类下使用多个部分标签作为我希望托管的每个相应相册的链接。我遇到了一个问题，我无法定义图像的大小以适应相应部分的内部。我希望将来能够扩展页面，因此不希望在可能的情况下添加不必要的代码行。

这是HTML的一部分

   <section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)">
      <h2 class="name">Title</h2>
      <ul class="details">
        <li>Shot With: </li>
        <li>Location:</li>
        <li>Date:</li>
      </ul>
    </section>

    <section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb)">
      <h2 class="name">Title</h2>
      <ul class="details">
        <li>Shot With: </li>
        <li>Location:</li>
        <li>Date:</li>
      </ul>
    </section>

和CSS

.album {
   display: flex;
   flex-direction: column;
   flex: 1 0 10em;
   box-shadow: 0 0 30px #424242;
   border-radius: 15px;
   overflow: hidden;
   padding: .9em;
   color: DarkSlateGrey;
   transition: flex-basis 350ms ease-in-out;
 }
 .album:hover {
   flex-basis: 25em;
 }

 .album:hover .details {
   opacity: 1;
 }

 .name {
   font-size: 1.3em;
 }

 .details {
   list-style: none;
   opacity: 0;
   transition: opacity 500ms ease-in-out;
 }

 .details li {
   font-size: 1em;
   line-height: 2em;
 }

   .album {
     flex-shrink: 1;
   }

我已将它设置为8个部分，但我制作了一个小pen和两个只是为了让它更容易;目前笔中的图像不适合各自容器的范围，我希望将图像居中并调整大小以适应这种情况。任何帮助将不胜感激。

Answer 1

如果我理解正确，你想控制背景图像的缩放/拟合方式。

试试这个，请注意我添加的最后两行：

.album {
   display: flex;
   flex-direction: column;
   flex: 1 0 10em;
   box-shadow: 0 0 30px #424242;
   border-radius: 15px;
   overflow: hidden;
   padding: .9em;
   color: DarkSlateGrey;
   transition: flex-basis 350ms ease-in-out;
   background-size: cover;
   background-position: center;
}

背景大小属性还有更多选项，您可能需要查看它们here。

封面选项会调整图像大小以覆盖整个容器，但如果图像太小（也确保使用足够大的图像），它也会放大图像，如果比例也会缩小一些边缘图像和容器之间是不同的。但在大多数情况下，这并不重要。

Answer 2

以下是一个简单的解决方案：

＆＃13;

.album {
display: flex;
flex-direction: column;
flex: 1 0 10em;
box-shadow: 0 0 30px #424242;
border-radius: 15px;
overflow: hidden;
padding: .9em;
color: DarkSlateGrey;
transition: flex-basis 350ms ease-in-out;
 }
 .album:hover {
flex-basis: 25em;
}
.album:hover .details {
opacity: 1;
 }
 .name {
font-size: 1.3em;
 }
 .details {
list-style: none;
opacity: 0;
transition: opacity 500ms ease-in-out;
 }
.details li {
font-size: 1em;
line-height: 2em;
}
.album {
flex-shrink: 1;
}

＆＃13;

<section class="album" style="background: url(https://images.pexels.com/photos/776390/pexels-photo-776390.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>

<section class="album" style="background: url(https://images.pexels.com/photos/1562/italian-landscape-mountains-nature.jpg?w=1260&h=750&auto=compress&cs=tinysrgb);background-repeat: no-repeat;background-size: 100% 100%;background-position: center; ">
<h2 class="name">Title</h2>
<ul class="details">
<li>Shot With: </li>
<li>Location:</li>
<li>Date:</li>
</ul>
</section>

＆＃13;

同一个班级，多个部分，多个背景

2 个答案: