添加带有 CSS 边框的缩略图

Question

我正在尝试重新创建 Lynda.com 对他们的课程列表缩略图图像所做的工作(见这里(。我不确定如何将图像放置在我已经存在的代码中。我不确定的是每次图像的尺寸，如果我的描述真的很长并且扩大了边框，我不确定如何处理图像大小调整。我该怎么做？

如果情况变得更糟，我会保持较小的描述。我还意识到，如果描述变长，图像也会变大，那么作为副作用，图像变大看起来与页面上的其他缩略图不一致。

.HTML：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<a class="course_list_link" href=""> 
<p class = "course_list_border"> 
<strong> Title </strong> <br/> <br/>    
description <br/> <br/>  
skill_level  &emsp; 
date &emsp; 
Views: views &emsp; 
subject </p> </a>

.CSS：

.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}

Answer 1

我在你的css和HTML文件中做了一些更改

.course_list_border{
	border-style: solid;
	border-width: 1px;
	border-color: #DCDCDC;
	padding: 10px;
	word-wrap: break-word;
}
.course_list_border:hover{
	background-color: #F8F8F8;
	cursor: pointer;
}
.course_list_link{
	color: black;
	display: inline-block;
	width: 30%;
}
.course_list_link:hover{
	text-decoration: none;
	color: black;
}
body {
	min-height: 400px;
	margin-bottom: 100px;
	margin-top: 0%;
	clear: both;
	padding-top: 55px;
	font-family: 'Roboto', sans-serif;
	font-size: 16.5px;
}

<a class="course_list_link" href=""> 
	  <p class = "course_list_border"> 
		<strong> Title </strong> <br/> <br/>    
		description <br/> <br/>  
		<img src="https://via.placeholder.com/200X150" alt="Lights" style="width:100%"/>
		skill_level  &emsp; 
		date &emsp; 
		Views: views &emsp; 
	  subject </p> 
	</a>

当您使用引导程序时，您还可以利用现有类来创建这种图像缩略图

https://getbootstrap.com/docs/4.0/content/figures/

Answer 2

通常，最好将所有项目分成元素，而不是将它们连接成一个段落。例如：

<style>
a.course_list_link {
display: block;
width: 300px;
border: 1px solid #DCDCDC;
border-radius: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
transition: all, 0.3s, ease;
}

a.course_list_link:hover .thumbnail {
filter: grayscale(50%);
}

a.course_list_link:hover {
background-color: whitesmoke;
}
a.course_list_link:active {
background-color: white;
}

a.course_list_link:hover p.description {
color: black !important;
}
.course_list_link .thumbnail {
background-color: grey;
background-size: cover; /* Guarantees your background always fits the thumbnail size, no matter its aspect ratio */
height: 150px;
}

.course_list_link .play-button {
opacity: 0.5;
height: inherit;
width: inherit;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
.course_list_link:hover .play-button {
background-image: url('https://www.drury.edu/images/socialmediaicons/play_button.png');
}
.course_list_link .content-area {
margin: 5px;
}

.course_list_link h2 {
color: black;
font-weight: 500;
font-size: 18px;
margin: 0;
}
.course_list_link p.description {
margin: 0;
margin-bottom: 5px;
font-size: 14px;
color: grey !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: black;
}
.metadata {
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.column {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.metadata .skill {
color: grey;
}

.metadata .date {
color: grey;
}

.metadata .views {
color: grey;
}

.metadata .subject {
font-weight: bold;
color: grey;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<a class="course_list_link" href="#">
<div class="thumbnail" style="background-image: url('https://img-aws.ehowcdn.com/560x560p/photos.demandstudios.com/getty/article/188/230/dv030463.jpg');"><!-- Set the bg image of this element in CSS -->
<div class="play-button"></div>
</div>
<div class="content-area">
<h2>Title</h2>
<p class="description">Description of the video, which may or may not be very long depending on the type of video, and what is chosen to display, and how many lines the space is allowed to occupy in the thumbnail.</p>
<div class="metadata">
<div class="column">
<div class="skill">Skill level</div>
<div class="views">Views</div>
</div>
<div>
<div class="date">Date</div>
</div>
<div>
<div class="subject">Subject That is Too Long And Will Inevitably Overflow to New Lines If Not Blocked by Some Sort of CSS Trick</div>
</div>
</div>
</div>
</a>

我也喜欢在CSS中设置缩略图。这样，即使您的缩略图更改了大小，它也始终在 HTML 元素中以相同的大小进行裁剪。但是，确保图像不会过大总是好的，以便页面快速加载;因此，制作真正的缩略图始终是一个好主意。

作为旁注，使用连字符而不是下划线是一般的 CSS 好习惯，因此.course_list_link变得.course-list-link。