html - 添加带有 CSS 边框的缩略图

Question

我正在尝试重新创建 Lynda.com 使用他们的类(class)列表缩略图所做的事情(参见 here)。我不确定如何将图像放入我现有的代码中 here .我不确定的是每次图像的尺寸，如果我的描述真的很长并且加宽了边框，我不确定如何处理图像大小调整。我该怎么做？

如果情况变得更糟，我会尽量减少描述。我还意识到，如果描述变长时图像也变大，作为副作用的图像变大将与页面上的其他缩略图看起来不一致。

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>

当您使用 bootstrap 时，您还可以利用现有的类来创建这种图像缩略图

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