javascript - 使用 HTML CSS 的响应式卡片布局

Question

我正在使用这个媒体卡代码笔作为参考设计一张卡片。这是我想要做的：

• 我想让图像适合我卡片的上半部分，并在下面显示文字。
• 我正在尝试添加一个卡片链接，通过单击标题或卡片上的任何位置，将用户带到另一个页面。

卡片布局也有问题：

• 当我减小屏幕尺寸时，右边框会像这样被覆盖

编辑：修复了上述卡片布局的问题。在卡片之前添加了标题（当屏幕宽度非常小时，它会延伸到图像容器之外，不确定这是否是一个大问题）并改进了一些格式（添加了媒体查询，修改了边距，高度）。

/* Style the content-main heading */
.content-main {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
}

.card {
  display: flex;
  flex-direction: column;
  margin: 10px auto 20px;
  overflow: hidden;
  border-radius: 5px;
  /* for the rounded corners */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  max-width: 700px;
  max-height: 1050px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.card-image img {
  width: 100%;
}

.card-title {
  text-decoration: none;
  color: #2E4053;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  margin-bottom: 0.5rem;
}

/* Media query */
/* for navigation menu */
@media all and (max-width: 600px) { 
  ...
}
/* for cards */
@media query only screen and (max-width: 400px){
  .card-image {
    height: 300px;
  }
}

<!-- content-main heading -->
<div class="content-main">
  <h1>Navigation content</h1>
</div>

<!--Card contents-->
<div class="card">
  <div class="card-image">
    <img src="/images/reviews-img-1.jpg" alt="..." />
  </div>
  <a href="#" class="card-title">Reviews</a>
  <p class="card-text">
    This is the place for reviews on cameras and film.
  </p>
</div>

<div class="card">
  <div class="card-image">
    <img src="/images/resources-img-2.jpg" alt="...">
  </div>
  <a href="#" class="card-title">Resources</a>
  <p class="card-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus condimentum viverra.
  </p>
</div>

<div class="card">
  <div class="card-image">
    <img src="/images/wheretogetfilmdeveloped-img-3.jpg" alt="...">
  </div>
  <a href="#" class="card-title">Where to Get Film Developed</a>
  <p class="card-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rhoncus condimentum viverra.
  </p>
</div>

如何创建我的卡片以使其类似于代码笔参考？

Answer 1

你应该改变.card

 max-width: 700px;
 max-height: 512px;

并添加一个类img

.card-image img{
  width:100%;
}

结果如下：

.card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  overflow: hidden;
  border-radius: 5px;
  /* for the rounded corners */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  max-width: 700px;
  max-height: 512px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.card-image img{
width:100%;
}
.card-title {
  text-decoration: none;
  color: #2E4053;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  margin-bottom: 0.5rem;
}

<div class="card">
  <div class="card-image">
    <img src="https://dynaimage.cdn.cnn.com/cnn/c_fill,g_auto,w_1200,h_675,ar_16:9/https%3A%2F%2Fcdn.cnn.com%2Fcnnnext%2Fdam%2Fassets%2F200424053232-tom-hanks-september-2019-file-restricted.jpg" alt="..." />
  </div>
  <a href="#" class="card-title">Reviews</a>
  <p class="card-text">
    This is the place for reviews on cameras and film.
  </p>
</div>

Answer 2

使图像具有响应性可能很棘手。我发现使用带有图像的 div 作为背景图像效果很好，请参阅下面我对您的代码的修改。不确定您所说的响应是什么意思，您希望在单击或悬停时出现动画？或者你想链接到什么东西？

.card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  overflow: hidden;
  border-radius: 5px;
  /* for the rounded corners */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  /* Changes below */
  max-width: 700px;
  max-height: 512px;
  /* Changes above */
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

.card-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* Changes below */
  background-image: url('/images/reviews-img-1.jpg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  /* Height should be the height of your photo - don't use a huge image size for a card component */
  height: 427px;
  width: 100%;
  /* Changes above */
}

@media only screen and (max-width: 400px) {
  .card-image {
    height: 300px;
  }
}

/* No changes to .card-title or .card-text */

<!--Card contents-->
<div class="card">
  <div class="card-image"></div>
  <a href="#" class="card-title">Reviews</a>
  <p class="card-text">
    This is the place for reviews on cameras and film.
  </p>
</div>

Answer 3

您可以按照下面的代码片段将图像响应为卡片的宽度，然后图像将分别调整大小。

/* Style the content-main heading */
.content-main {
  font-size: 14px;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;
}
.card {
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  overflow: hidden;
  border-radius: 5px;
  /* for the rounded corners */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  width: 100%;
  max-width: 700px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
.card-image {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 50%;
  position: relative;
  background-color: #ccc;
}
.card-image img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.card-title {
  text-decoration: none;
  color: #2E4053;
  font-size: 22px;
  font-weight: bold;
  margin: 1rem 0 0 0;
}
.card-text {
  margin: 0.65rem 0 1rem 0;
}

<!-- content-main heading -->
<div class="content-main">
    <h1>Navigation content</h1>
</div>

<!--Card contents-->
<div class="card">
    <div class="card-image">
        <img src="https://i.stack.imgur.com/qOGFG.png" alt="..." />
    </div>
    <a href="#" class="card-title">Reviews</a>
    <p class="card-text">
        This is the place for reviews on cameras and film. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate veritatis asperiores harum officiis optio. Quis, repudiandae! Fuga ipsum laudantium omnis, dicta molestiae itaque aspernatur quam. Quam fugiat recusandae hic? Fugit.
    </p>
</div>